非零基础自学前端最后一遍一 HTML+CSS 14 额外知识补充 14.3 网络字体的使用过程

以你之姓@ 2024-03-22 15:27 21阅读 0赞

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

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

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  14 额外知识补充
         *   *  14.3 网络字体的使用过程
             *   *  14.3.1 使用Web Fonts

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

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

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

##### 14.3 网络字体的使用过程 #####

###### 14.3.1 使用Web Fonts ######

*  第一步：在字体天下网站下载一个字体
    
     *  https://www.fonts.net.cn/fonts-zh-1.html
     *  默认下载下来的是ttf文件；
 *  第二步：使用字体；
    
     *  使用过程如下：
        
        1.  将字体放到对应的目录中
        2.  通过@font-face来引入字体, 并且设置格式
        3.  使用字体

注意: @font-face 用于加载一个自定义的字体;

<!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("./fonts/AaQingHuanYuanTi-2.ttf");
        }
    
        .box {
         
          font-family: "why";
        }
      </style>
    </head>
    
    <body>
    
      <div class="box">我是div元素</div>
    
    </body>
    
    </html>

渲染效果

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

[10234de611c54c3cb15e648229c1757c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/3a5d7a42bdec46f5b32317eebdbcb7ab.png
[1b34635c85de4883996da71b9b51c510.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/f8efa9dd1c204f45b3d266390b8069fc.png