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 上編輯範例-