Bagaimana cara menerapkan Amp-font diblog AMP Html

Amp-font shannenpio

Pelajari cara menggunakan komponen amp-font untuk mengaktifkan dan memantau pemuatan font khusus di halaman AMP.

Cara Penerapannya

amp-font Ini adalah elemen bawaan dan dimasukan secara otomatis melalui runtime AMP.

<script async src="https://cdn.ampproject.org/v0.js"></script>

Tetapkan aturan CSS khusus untuk merancang gaya dokumen, tergantung pada apakah dokumen tersebut dimuat dengan benar atau tidak. Ketahui semua kelas css yang kompatibel disini

<style amp-custom>
  @font-face {
    font-family: 'Font Does Not exist';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/FontDoesNotExist.ttf) format('truetype');
  }
  @font-face {
    font-family: 'Another Font That Does Not exist';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/FontDoesNotExist.ttf) format('truetype');
  }
  @font-face {
    font-family: 'Comic AMP';
    font-style: normal;
    font-weight: 400;
    src: local('Comic AMP'), url(/fonts/ComicAMP.ttf) format('truetype');
  }

  .unavailable-font-loaded .unavailable-font {
    font-family: 'Font Does Not exist', serif, sans-serif;
  }
  .comicamp-loaded .comicamp {
    font-family: 'Comic AMP', serif, sans-serif;
  }
  .another-unavailable-font-loaded .another-unavailable-font {
    font-family: 'Another Font That Does Not exist', serif, sans-serif;
  }
  .unavailable-font-loading, .comicamp-loading, .another-unavailable-font-loading {
    color: blue;
  }
  .unavailable-font-loading .unavailable-font,
    .comicamp-loading .comicamp,
      .another-unavailable-font-loading .another-unavailable-font {
        color: aqua;
  }
  .unavailable-font-missing .unavailable-font,
    .comicamp-missing .comicamp,
      .another-unavailable-font-missing .another-unavailable-font  {
        color: red;
  }
</style>

Contohnya sumber tidak ada

Masukkan sumber penguat ke dalam badan atau kepala dokumen. Gunakan atribut batas waktu untuk menentukan waktu dalam milidetik untuk menunggu hingga sumber tersedia. Atribut ini adalah opsional dan nilai standarnya adalah 3000. Use on-error-remove-class, on-error-add-class, on-load-remove-class, on-load-add-class to specify the CSS classes to use. Ini digunakan jika font dimuat dengan benar atau tidak. Untuk deskripsi terperinci, lihat documentation

Contohnya

<amp-font layout="nodisplay"
  font-family="Font Does Not exist"
  timeout="2000"
  on-error-remove-class="unavailable-font-loading"
  on-error-add-class="unavailable-font-missing"
  on-load-remove-class="unavailable-font-loading"
  on-load-add-class="unavailable-font-loaded">
</amp-font>

Di sini kami mendeklarasikan ...

Contohnya

  <amp-font layout="nodisplay"
    font-family="Comic AMP"
    timeout="2000"
    on-error-remove-class="comicamp-loading"
    on-error-add-class="comicamp-missing"
    on-load-remove-class="comicamp-loading"
    on-load-add-class="comicamp-loaded">
  </amp-font>

Dan gunakan sumber yang ada

Contohnya



  Teks ini ditampilkan dengan warna merah jika font yang dipilih tidak didukung.



<p class="comicamp">
  Teks ini ditampilkan dengan warna merah jika font yang dipilih tidak didukung.
</p>

Kali ini sumbernya tidak tersedia.

Contohnya



  Teks ini ditampilkan dengan warna merah jika font yang dipilih tidak didukung.


<p class="unavailable-font">
  Teks ini ditampilkan dengan warna merah jika font yang dipilih tidak didukung.
</p>

Menggunakan font yang di-cache

Atur batas waktu = "0" untuk memuat font hanya jika sudah di-cache.

Contohnya

<amp-font layout="nodisplay"
  font-family="Another Font That Does Not exist"
  timeout="0"
  on-error-remove-class="another-unavailable-font-loading"
  on-error-add-class="another-unavailable-font-missing"
  on-load-remove-class="another-unavailable-font-loading"
  on-load-add-class="another-unavailable-font-loaded">
</amp-font>

Tags: Amp Html Tutorial Blog

Share: