关于css中字体的二三事

前言

在平时日常使用css的时候，最容易忽略的个人认为就是这个字体了，关于字体的使用，一般没有什么特殊的要求的话，都是使用的用户代理，也就是用户浏览器自身设置的字体，而不会去使用其他的字体；
也没有多大的必要去使用一些特殊的字体，特别是一不小心就侵权了，因为有部分字体人就是依托这个字体来让自己公司盈利，这里具体怎么盈利就不多说，只希望在使用某些字体之前，需要再三斟酌了！！
本文也仅针对平常关于字体使用过程的两三个点进行记录学习，以便于后续查阅！

font-family

声明web程序中使用的字体为某一字体族的字体，可同时声明多个字体进行使用

@font-face

@font-face的目的是让我们的程序使用自定义的字体，借助于@font-face可以定义一个专门的字体族名称，并对应于服务器上的一个字体文件，用户浏览器将自动下载那个文件，并使用它来渲染页面中的文本！

@font-face {
    font-family: 'my-font'; // 指定的自定义的字体名称
    src: url("***.otf");    // url可以用逗号分隔符来定义，也就是可以配置多个下载地址作为备用的下载地址
}
h1{
    font-family: "my-font";
}

👆 中的src需要注意一下，如果这里src指向的其他服务器，一般来说是无法进行下载的，遵循同源策略，除非该服务器允许跨域资源访问！

✨ 这里也就说明了一个情况，当我们在使用三方库(比如iview)的时候，原本它提供的采用npm的方式来使用的，在进行体积方面的优化升级改造的过程中，在将iview采用cdn的方式来使用的时候，如果这个时候将cdn切换为自己的
服务器的时候，那么将会出现字体找不到，原因是我们在使用的iview的打包出来后的css文件时候，该文件中使用的自定义字体中@font-face有指定src的路径，因此，我们需要额外的将其字体文件download下来，并维护到自己的
资源服务器中，使其能够正常访问到！
如下图所示：