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 不同，實驗性的 1.0 版本 amp-fit-text 不會將邊界和邊框大小視為有助於總 fit-text 覆蓋區域。

在有效的 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。