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 (最小字型大小)
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 (最大字型大小)
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 上編輯範例-