Google AMP - Carattere

Amp font è un componente amp in amp che sostanzialmente aiuta a attivare e monitorare i caratteri personalizzati nella pagina amp. Questo capitolo discute in dettaglio di amp-font.

Per lavorare con amp-font, dobbiamo aggiungere il seguente file javascript:

<script async custom-element = "amp-font" 
   src = "https://cdn.ampproject.org/v0/amp-font-0.1.js">
</script>

Il componente amp-font viene utilizzato per controllare il tempo impiegato per il caricamento dei caratteri. Ha un attributo timeout, che richiede tempo in millisecondi. Per impostazione predefinita, è 3000 ms. Il componente consente di aggiungere / rimuovere classi da document.documentElement o document.body a seconda che il font richiesto sia caricato o sia entrato in uno stato di errore.

Il formato per il tag amp-font è come mostrato di seguito:

<amp-font
   layout = "nodisplay"
   font-family = "Roboto Italic"
   timeout = "2000"
   on-error-remove-class = "robotoitalic-loading"
   on-error-add-class = "robotoitalic-missing"
   on-load-remove-class = "robotoitalic-loading"
   on-load-add-class = "robotoitalic-loaded">
</amp-font>

Un esempio funzionante su come usare amp-font nelle pagine amp è come mostrato qui -

Esempio

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Font</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.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>
      
      <cript async custom-element = "amp-font" 
         src = "https://cdn.ampproject.org/v0/amp-font-0.1.js"
      ></script>
      <style amp-custom>
         @font-face {
            font-family: 'This font is not available';
            font-style: normal;
            font-weight: 300;
            src: url(fonts/MissingFont.ttf) format('truetype');
         }
         .font-missing {
            color:red;
            font-size:25px;
         }
      </style>
   </head>
   <body>
      <h1>Google AMP - Amp Font</h1>
         <amp-font
            layout = "nodisplay"
            font-family = "Font Does Not exist"
            timeout = "2000"
            on-error-remove-class = "font-missing"
            on-error-add-class = "font-error"
            on-load-remove-class = "font-missing"
            on-load-add-class = "font-loaded">
         </amp-font>
         <p class = "font-missing">
            Example of amp-font component to show how 
            attributes on-error-remove-class, 
            on-error-add-class, on-load-remove-class 
            and on-load-add-class works when the font 
            file to be loaded does not exist.
         </p>
   </body>
</html>

Produzione

L'output del codice di esempio fornito sopra è come mostrato di seguito:

Un esempio di amp-font quando il file del font viene caricato correttamente è mostrato qui -

Esempio

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Font</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.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>
      
      <script async custom-element = "amp-font" 
         src = "https://cdn.ampproject.org/v0/amp-font-0.1.js">
      </script>
      <style amp-custom>
         @font-face {
            font-family: 'This font is not available';
            font-style: normal;
            font-weight: 300;
            src: url(fonts/MissingFont.ttf) 
            format('truetype');
         }
         @font-face {
            font-family: 'Roboto Italic';
            font-style: normal;
            font-weight: 300;
            src:url(fonts/Roboto-Italic.ttf) format('truetype');
         }
         .font-missing {
            color:red;
            font-size:25px;
         }
         .robotoitalic-loading {
            color: green;
         }
         .robotoitalic-loaded {
            font-size:25px;
            color: blue;
         }
         .robotoitalic-missing {
            color: red;
         }
         .robotoitalic {
            font-family: 'Roboto Italic';
         }
      </style>
   </head>
   <body>
      <h1>Google AMP - Amp Font</h1>
         <amp-font
            layout = "nodisplay"
            font-family = "Font Does Not exist"
            timeout = "2000"
            on-error-remove-class = "font-missing"
            on-error-add-class = "font-error"
            on-load-remove-class = "font-missing"
            on-load-add-class = "font-loaded">
         </amp-font>
         <p class="font-missing">
            Example of amp-font component to show 
            how attributes on-error-remove-class, 
            on-error-add-class, on-load-remove-class 
            and on-load-add-class works when the 
            font file to be loaded does not exist.
         </p>
            
         <amp-font
            layout = "nodisplay"
            font-family = "Roboto Italic"
            timeout = "2000"
            on-error-remove-class = "robotoitalic-
            loading"
            on-error-add-class = "robotoitalic-missing"
            on-load-remove-class = "robotoitalic-loading"
            on-load-add-class = "robotoitalic-loaded">
         </amp-font>
         <p class = "robotoitalic">
            Example of amp-font component to show how 
            attributes on-error-remove-class, 
            on-error-add-class, on-load-remove-class 
            and on-load-add-class works when the font 
            file exists and loads fine.
         </p>
   </body>
</html>

Produzione

L'output del codice di esempio fornito sopra è come mostrato di seguito:

L'esempio sopra mostra come lavorare con attributi di font come font-family,timeout,on-error-remove-class,on-error-add-class,on-load-remove-class,on-load-add-classLe classi decidono se c'è errore o successo nel caricamento dei caratteri.

↰ Previous page Next page ↱

Google AMP - Carattere

Esempio

Produzione

Esempio

Produzione

Tutorial su Google AMP