非零基础自学前端最后一遍一 HTML+CSS 14 额外知识补充 14.4 网络字体的兼容性写法

灰太狼 2024-03-22 15:27 8阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  14 额外知识补充
         *   *  14.4 网络字体的兼容性写法
             *   *  14.4.1 web-fonts的兼容性
                 *  14.4.2 web fonts兼容性写法

![在这里插入图片描述][aefd8d1fd86b459bbc34dacd09a76031.png_pic_center]

#### 一 HTML+CSS ####

#### 14 额外知识补充 ####

##### 14.4 网络字体的兼容性写法 #####

###### 14.4.1 web-fonts的兼容性 ######

*  我们刚才使用的字体文件是 .ttf, 它是TrueType字体.
    
     *  在开发中某些浏览器可能不支持该字体, 所以为了浏 览器的兼容性问题, 我们需要有对应其他格式的字体;
 *  TrueType字体：拓展名是 .ttf
    
     *  OpenType/TrueType字体：拓展名是 .ttf、.otf， 建立在TrueType字体之上
     *  Embedded OpenType字体：拓展名是 .eot， OpenType字体的压缩版
     *  SVG字体：拓展名是 .svg、 .svgz
     *  WOFF表示Web Open Font Format web开放字体： 拓展名是 .woff，建立在TrueType字体之上
 *  这里我们提供一个网站来生产对应的字体文件:
    
     *  https://font.qqe2.com/\# 暂时可用
        
        ![在这里插入图片描述][34d4136155624043960eeeca8143b10e.png_pic_center]

###### 14.4.2 web fonts兼容性写法 ######

*  如果我们具备很强的兼容性, 那么可以如下格式编写:
    
    ![在这里插入图片描述][37167ab83df1404d954fc47ece08e95d.png_pic_center]
 *  这被称为"bulletproof @font-face syntax（刀枪不入的@font-face语法）“:
    
     *  这是 Paul Irish早期的一篇文章提及后@font-face开始流行起来 (Bulletproof @font-face Syntax)。
 *  src用于指定字体资源
    
     *  url指定资源的路径
     *  format用于帮助浏览器快速识别字体的格式;

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        @font-face {
         
          font-family: "why";
          src: url("./fonts02/AaQingHuanYuanTi.eot");
          /* IE9 */
          src: url("./fonts02/AaQingHuanYuanTi.eot?#iefix") format("embedded-opentype"),
            /* IE6-IE8 */
            url("./fonts02/AaQingHuanYuanTi.woff") format("woff"),
            /* chrome、firefox */
            url("./fonts02/AaQingHuanYuanTi.ttf") format("truetype"),
            /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
            url("./fonts02/AaQingHuanYuanTi.svg#uxfonteditor") format("svg");
          /* iOS 4.1- */
    
          font-style: normal;
          font-weight: 400;
        }
    
        body {
         
          font-family: "why";
        }
      </style>
    </head>
    
    <body>
    
      <div class="box">我是div元素</div>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][41be3560002a4ee28170499024bf79b8.png_pic_center]

[aefd8d1fd86b459bbc34dacd09a76031.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/1b569af3036941f68376155fd6e9e6dd.png
[34d4136155624043960eeeca8143b10e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/6c05b9d0bae7446f85616be72ca78f38.png
[37167ab83df1404d954fc47ece08e95d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/ef71137e7c134cd2a68ac7fdd3951093.png
[41be3560002a4ee28170499024bf79b8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/500c76c5ab04434db41172bf804f2914.png