amp-fit-text

简介

amp-fit-text 使您能够管理给定区域中文本的大小和适应性。

设置

包含 amp-fit-text 组件。

<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>

基本用法

在以下每个示例中，amp-fit-text 元素都嵌套在具有固定尺寸的容器中，以演示属性和布局值的差异。当 amp-fit-text 与给定的 height、width 和 layout="responsive" 属性一起使用时，文本将缩放以适合父容器。

Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt。

<div class="square-small"><amp-fit-text width="1" height="1" layout="responsive">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
<div class="square-medium"><amp-fit-text width="1" height="1" layout="responsive">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
<div class="square-large"><amp-fit-text width="1" height="1" layout="responsive">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>

宽高比

文本将以响应式布局定义的比例进行响应式缩放，但不会超过其父级的大小。此示例定义了 1.5:1 (3:2) 的宽高比。

Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt。

<div class="square-small"><amp-fit-text width="300" height="200" layout="responsive">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
<div class="square-medium"><amp-fit-text width="300" height="200" layout="responsive">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
<div class="square-large"><amp-fit-text width="300" height="200" layout="responsive">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>

min-font-size

min-font-size 属性决定文本的最小大小。在本例中，我们规定了最小值为 30，这将导致它超出其固定块父级的大小，并被截断以进行适当的适应。

Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt。

<div class="square-small"><amp-fit-text width="200" height="200" layout="responsive" min-font-size="18">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
<div class="square-medium"><amp-fit-text width="200" height="200" layout="responsive" min-font-size="18">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
<div class="square-large"><amp-fit-text width="200" height="200" layout="responsive" min-font-size="18">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>

max-font-size

max-font-size 属性决定文本的最大大小。在本例中，我们规定了最大值为 10，确保它不会填充其父元素的大小。

Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt。

<div class="square-small"><amp-fit-text width="200" height="200" layout="responsive" max-font-size="18">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
<div class="square-medium"><amp-fit-text width="200" height="200" layout="responsive" max-font-size="18">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>
<div class="square-large"><amp-fit-text width="200" height="200" layout="responsive" max-font-size="18">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text></div>

需要更多解释？

如果此页面上的解释未能涵盖您的所有问题，请随时联系其他 AMP 用户，讨论您的确切用例。

转到 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的长期参与者，但我们也欢迎您对您特别感兴趣的问题进行一次性贡献。

在 GitHub 上编辑示例

作者： @jmadler