amp-fit-text

1.0 0.1

<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 元素中的內容，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>

溢出內容

如果 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>

溢出內容的無障礙考量

雖然溢出的內容會被視覺上截斷以適配容器，但請注意，它仍然存在於文件中。 不要依賴溢出行為來簡單地「填充」大量內容到您的頁面中 - 雖然視覺上看起來可能很合適，但它可能會導致頁面對輔助技術（例如螢幕閱讀器）的使用者來說過於冗長，因為對於這些使用者來說，所有截斷的內容仍然會被完整地閱讀/宣告。

屬性

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。

驗證

請參閱 AMP 驗證器規範中的 amp-fit-text 規則。