Google AMP 放大器字体

amp-font用于检查字体是否已加载到AMP HTML页面中。

所需脚本：将 amp-font 导入标头。

如果字体不可用，我们使用以下样式将字体显示为红色。

HTML

属性 ：

1. font-family：指定系列示例的字体：futura、georgia 等。
2. layout：定义一个特定的布局，这个属性必须设置为 nodisplay。

示例：在这里，第二个字体系列设置为 abc，因为没有名称为 abc 的系列，它以红色显示。

HTML

  

    
    Google AMP amp-font
  
    
    
      
    
    
      
    
      
    
      
    
        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
            }
        }
    
  
    
        
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        
    
      
    
        :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);
        }
    

  

    
  
    
        
        
  
        
            geeks for geeks
        
  
    
  
    
    
        
        
          
        
            geeks for geeks
        
  
    

  

输出：