amp-fit-text
Componen amp-fit-text sangat memungkinkan untuk mengelola ukuran dan kesesuaian teks dalam area tertentu.
Langkah Pertama
Masukkan skrip amp-fit-teks tepat di bawah pembukaan <head>
Uso básico
Dalam setiap contoh ini, elemen <amp-fit-text> itu bersarang di dalam blok div 200x200 abu-abu untuk menunjukkan perbedaan atribut dan nilai desain.
Ketika amp-fit-teks digunakan dengan tinggi, lebar dan tata letak = "responsif", teks akan diskalakan dalam proporsi yang disediakan tetapi tidak akan melebihi ukuran induknya.
Relación de aspecto: 1.5: 1 (3: 2)
Aspect ratio: 1:1
The attribute min-font-size indicates a minimum size for the text. In this case, we have dictated a minimum of 30, which will exceed the size of your fixed-block parent and be truncated to adjust as appropriate.
Atribut max-font-size menunjukkan ukuran maksimum untuk teks. Dalam hal ini, kami telah menetapkan maksimum 10, memastikan bahwa itu tidak mengisi ukuran elemen induknya.
Kapan digunakan amp-fit-text dengan ketinggian tertentu dan atribut layout = "fixed-height", itu akan menyesuaikan dengan ukuran tinggi yang diberikan (200) dan menyesuaikan lebar seperlunya untuk tetap dalam batas wadah induknya.
Langkah Pertama
Masukkan skrip amp-fit-teks tepat di bawah pembukaan <head>
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
Uso básico
Dalam setiap contoh ini, elemen <amp-fit-text> itu bersarang di dalam blok div 200x200 abu-abu untuk menunjukkan perbedaan atribut dan nilai desain.
Ketika amp-fit-teks digunakan dengan tinggi, lebar dan tata letak = "responsif", teks akan diskalakan dalam proporsi yang disediakan tetapi tidak akan melebihi ukuran induknya.
Relación de aspecto: 1.5: 1 (3: 2)
Contohnya<div class="fixedblock"> <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>Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
Aspect ratio: 1:1
Contohnya<div class="fixedblock"> <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>Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
The attribute min-font-size indicates a minimum size for the text. In this case, we have dictated a minimum of 30, which will exceed the size of your fixed-block parent and be truncated to adjust as appropriate.
Contohnya<div class="fixedblock"> <amp-fit-text width="300" height="200" layout="responsive" min-font-size="30">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text> </div>Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
Atribut max-font-size menunjukkan ukuran maksimum untuk teks. Dalam hal ini, kami telah menetapkan maksimum 10, memastikan bahwa itu tidak mengisi ukuran elemen induknya.
Contohnya<div class="fixedblock"> <amp-fit-text width="300" height="200" layout="responsive" max-font-size="10">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text> </div>Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
Kapan digunakan amp-fit-text dengan ketinggian tertentu dan atribut layout = "fixed-height", itu akan menyesuaikan dengan ukuran tinggi yang diberikan (200) dan menyesuaikan lebar seperlunya untuk tetap dalam batas wadah induknya.
Contohnya<div class="fixedblock"> <amp-fit-text height="200" layout="fixed-height">Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.</amp-fit-text> </div>Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.