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 上编辑示例-