非零基础自学前端最后一遍一 HTML+CSS 14 额外知识补充 14.2 网络字体使用流程和原理

骑猪看日落 2024-03-22 15:27 15阅读 0赞

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

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

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  14 额外知识补充
         *   *  14.2 网络字体使用流程和原理
             *   *  14.2.1 认识Web字体
                 *  14.2.2 Web fonts的工作原理

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

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

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

##### 14.2 网络字体使用流程和原理 #####

###### 14.2.1 认识Web字体 ######

*  在之前我们有设置过页面使用的字体: font-family
    
     *  我们需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体。
     *  这样的方式完全没有问题，但是对于传统的web开发人员来说，字体选择是有限的;
     *  这就是所谓的 Web-safe 字体;
     *  并且这种默认可选的字体并不能进行一些定制化的需求;
 *  比如下面的字体样式, 系统的字体肯定是不能实现的
    
    ![在这里插入图片描述][a32f6b1b2f784cd4b4e8ae086865cdf7.png_pic_center]
 *  那么我们是否依然可以在网页中使用这些字体呢? 使用Web Fonts即可.

###### 14.2.2 Web fonts的工作原理 ######

*  首先, 我们需要通过一些渠道获取到希望使用的字体(不是开发来做的事情):
    
     *  对于某些收费的字体, 我们需要获取到对应的授权;
     *  对于某些公司定制的字体, 需要设计人员来设计;
     *  对于某些免费的字体, 我们需要获取到对应的字体文件;
 *  其次, 在我们的CSS代码当中使用该字体(重要):
    
     *  具体的过程看后面的操作流程;
 *  最后, 在部署静态资源时, 将HTML/CSS/JavaScript/Font一起部署在静态服务器中;
 *  用户的角度:
    
     *  浏览器一个网页时, 因为代码中有引入字体文件, 字体文件会被一起下载下来;
     *  浏览器会根据使用的字体在下载的字体文件中查找、解析、使用对应的字体；
     *  在浏览器中使用对应的字体显示内容；

[4f71340de01547b886a3abbd58a5b64c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/8be8afb87ba8493285b5c840751c959e.png
[a32f6b1b2f784cd4b4e8ae086865cdf7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e4592d1d61cd4029b6c11387fab2967f.png