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" 属性一起使用时，文本将缩放以适合父容器。
<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）的宽高比。
<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 属性指定文本的最小大小。在本例中，我们指定最小值为 30，这将导致文本超出其固定块父级的大小，并被截断以适当的尺寸进行适配。
<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 属性指定文本的最大大小。在本例中，我们指定最大值为 10，确保文本不会填充其父元素的大小。
<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 上编辑示例-