Amp-font


Amp-font


Aprenda a utilizar el componente amp-font para activar y supervisar la carga de fuentes personalizadas en las páginas AMP.

Preparar

amp-font es elemento incorporado y se importa automáticamente a través del tiempo de ejecución de AMP.


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


Defina las reglas CSS personalizadas para diseñar el estilo del documento, dependiendo de si se ha cargado correctamente o no. Conozca todas las clases de css compatibles aquí


<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>


Ejemplo de fuente no existente

Incorpore la fuente del amplificador dentro del cuerpo o la cabeza del documento. Utilice el atributo timeout para especificar el tiempo en milisegundos para esperar hasta que la fuente esté disponible. Este atributo es opcional y su valor predeterminado es 3000. Use on-error-remove-class, on-error-add-class, on-load-remove-class, on-load-add-class para especificar las clases CSS a usar. Se utiliza si la fuente se carga correctamente o no. Para una descripción detallada, consulte la documentación


Ejemplo

<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>


Aquí declaramos ...


Ejemplo

  <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>


Y utilizar una fuente existente


Ejemplo

This text is displayed in red if the chosen font is not supported.

<p class="comicamp">   This text is displayed in red if the chosen font is not supported. </p>

Esta vez la fuente no está disponible.


Ejemplo

This text is displayed in red if the chosen font is not supported.

<p class="unavailable-font">   This text is displayed in red if the chosen font is not supported. </p>

Uso de fuentes almacenadas en caché

Establezca timeout="0" para cargar la fuente sólo si ya está en caché.


Ejemplo

<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>






Share:

Related post

Disqus

Disqus comments:


Facebook

Facebook comments: