La fuente amp se usa para verificar si la fuente está cargada o no en una página HTML AMP .
Scripts requeridos: importa amp-font en el encabezado.
HTML
<script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"> </script>
Usamos el siguiente estilo para mostrar la fuente en rojo si la fuente no está disponible.
HTML
<style amp-custom>
:root {
--color-error: #B00020;
--color-primary: #005AF0;
}
@font-face {
font-family: 'UnavailableFont';
font-style: normal;
font-weight: 400;
src: url(fonts/UnavailableFont.ttf) format('truetype');
}
@font-face {
font-family: 'Comic AMP';
font-style: normal;
font-weight: 400;
src: local('Comic AMP'),
url(/static/samples/fonts/ComicAMP.ttf)
format('truetype');
}
@font-face {
font-family: 'Comic AMP 2';
font-style: normal;
font-weight: 400;
src: local('Comic AMP'),
url(/static/samples/fonts/ComicAMP2.ttf)
format('truetype');
}
.unavailable-font-loaded .unavailable-font {
font-family: 'UnavailableFont';
}
.comicamp-loaded .comicamp {
font-family: 'Comic AMP';
}
.comicamp2-loaded .comicamp2 {
font-family: 'Comic AMP 2';
}
.comicamp-loading .comicamp,
.comicamp2-loading .comicamp2,
.unavailable-font-loading .unavailable-font {
color: var(--color-primary);
}
.comicamp-missing .comicamp,
.comicamp2-missing .comicamp2,
.unavailable-font-missing .unavailable-font {
color: var(--color-error);
}
</style>
Atributos:
- font-family: especifica la fuente del ejemplo de la familia: futura, georgia, etc.
- diseño: define un diseño específico, este atributo debe establecerse en nodisplay.
Ejemplo: aquí, la segunda familia de fuentes se establece como abc ya que no hay familia con el nombre abc, se muestra en color rojo.
HTML
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>Google AMP amp-font</title>
<script async src=
"https://cdn.ampproject.org/v0.js">
</script>
<script async custom-element="amp-font"
src="https://cdn.ampproject.org/v0/amp-font-0.1.js">
</script>
<link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-font/index.html">
<meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
</style>
</noscript>
<style amp-custom>
:root {
--color-error: #B00020;
--color-primary: #005AF0;
}
@font-face {
font-family: 'UnavailableFont';
font-style: normal;
font-weight: 400;
src: url(fonts/UnavailableFont.ttf)
format('truetype');
}
@font-face {
font-family: 'Comic AMP';
font-style: normal;
font-weight: 400;
src: local('Comic AMP'),
url(/static/samples/fonts/ComicAMP.ttf)
format('truetype');
}
@font-face {
font-family: 'Comic AMP 2';
font-style: normal;
font-weight: 400;
src: local('Comic AMP'),
url(/static/samples/fonts/ComicAMP2.ttf)
format('truetype');
}
.unavailable-font-loaded .unavailable-font {
font-family: 'UnavailableFont';
}
.comicamp-loaded .comicamp {
font-family: 'Comic AMP';
}
.comicamp2-loaded .comicamp2 {
font-family: 'Comic AMP 2';
}
.comicamp-loading .comicamp,
.comicamp2-loading .comicamp2,
.unavailable-font-loading .unavailable-font {
color: var(--color-primary);
}
.comicamp-missing .comicamp,
.comicamp2-missing .comicamp2,
.unavailable-font-missing .unavailable-font {
color: var(--color-error);
}
</style>
</head>
<body>
<!-- ## Existing font -->
<div>
<amp-font layout="nodisplay"
font-family="georgia" 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>
<p class="comicamp">
geeks for geeks
</p>
</div>
<!-- ## Unavailable font -->
<div>
<amp-font layout="nodisplay" font-family="abc"
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>
<p class="unavailable-font">
geeks for geeks
</p>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por somsagar2019 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA