amp-fit-text

1.0 0.1

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

<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-1.0.js"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-fit-text-1.0.css">

用法

扩展或缩小其字体大小以使内容适合给定的空间。

amp-fit-text 组件允许您管理指定区域内的文本大小和贴合度。对于包含在 amp-fit-text 元素中的内容，amp-fit-text 组件会找到最合适的字体大小，以使所有内容都适合可用空间。amp-fit-text 的预期内容是文本或其他内联内容，但它也可以包含非内联内容。

在以下示例中，<amp-fit-text> 元素嵌套在 300x300 蓝色 div 块内。对于 <amp-fit-text> 元素，我们指定了 responsive 布局。因此，文本会根据 <amp-fit-text> 元素的宽度和高度（200x200）提供的纵横比自适应缩放，但文本不会超出其父级的尺寸。

<div style="width: 300px; height: 300px; background:#005AF0; color: #FFF;">
  <amp-fit-text width="200" height="200" layout="responsive">
    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
    inermis reprehendunt.
  </amp-fit-text>
</div>

以下示例类似于上面的示例，但在本示例中，我们指定 max-font-size 为 22，因此文本较小，但仍适合该空间

<div style="width: 300px; height: 300px; background:#005AF0; color: #FFF;">
  <amp-fit-text width="200" height="200" layout="responsive" max-font-size="22">
    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
    inermis reprehendunt.
  </amp-fit-text>
</div>

从 0.1 迁移

与 0.1 不同，amp-fit-text 的实验性 1.0 版本不会将边距和边框大小计入总贴合文本覆盖区域。

在有效的 AMP 文档之外独立使用

借助 Bento，您可以在非 AMP 页面中使用 AMP 组件，而无需完全采用有效的 AMP。您可以获取这些组件，并将它们放置在不支持 AMP 的框架和 CMS 的实现中。在我们的指南 在非 AMP 页面中使用 AMP 组件 中阅读更多内容。

要查找 amp-fit-text 的独立版本，请参阅 bento-fit-text。

溢出内容

如果 amp-fit-text 的内容溢出可用空间，即使指定了 min-font-size，溢出的内容也会被截断并隐藏。基于 WebKit 和 Blink 的浏览器会对溢出的内容显示省略号。

在以下示例中，我们指定了 min-font-size 为 40，并在 amp-fit-text 元素中添加了更多内容。这会导致内容超出其固定块父级的尺寸，因此文本会被截断以适应容器。

<div style="width: 300px; height: 300px; background:#005AF0; color: #FFF;">
  <amp-fit-text width="200" height="200" layout="responsive" min-font-size="40">
    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
    inermis reprehendunt. Lorem ipsum dolor sit amet, has nisl nihil convenire
    et, vim at aeque inermis reprehendunt
  </amp-fit-text>
</div>

溢出内容的可访问性注意事项

虽然溢出的内容在视觉上被截断以适应容器，但请注意，它仍然存在于文档中。不要依赖溢出行为来简单地“填充”页面中的大量内容 - 虽然在视觉上可能看起来合适，但它可能会导致页面对辅助技术（例如屏幕阅读器）的用户来说过于冗长，因为对于这些用户来说，所有截断的内容仍然会被完整地读取/播报。

属性

媒体查询

<amp-fit-text> 的属性可以配置为根据 媒体查询 使用不同的选项。

min-font-size

指定 amp-fit-text 可以使用的最小字体大小（以像素为单位的整数）。

max-font-size

指定 amp-fit-text 可以使用的最大字体大小（以像素为单位的整数）。

通用属性

此元素包含扩展到 AMP 组件的 通用属性。

样式

您可以使用标准 CSS 对 amp-fit-text 进行样式设置。特别是，您可以使用 text-align、font-weight、color 和许多其他 CSS 属性，主要例外是 font-size。