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>

Tags: Amp HTML en espanol

Share: