网页修改自定义字体的CSS代码图文教程

小伙伴们是否都存在一个疑问？想要修改网页的字体怎么办？怎么更换网页的字体，又如何引用自定义字体呢？其实很简单，魔改完本站部分样式之后，索性简单写个教程，给需要的新手小白一丢丢帮助吧

首先我们需要在CSS样式文件里面引入字体文件代码，参考如下CSS样式代码：

PS：字体在使用的时候注意版权问题，商用记得购买版权

@font-face {
    font-family: 'AhaoYw';
    font-display: swap;
    src: url('./font/AhaoYw.eot');
    src: url('./font/AhaoYw.eot?#iefix') format('embedded-opentype'),
         url('./font/AhaoYw.woff2') format('woff2'),
       url('./font/AhaoYw.woff') format('woff'),
       url('./font/AhaoYw.ttf') format('truetype'),
       url('./font/AhaoYw.svg') format('svg');
}

说明
@font-face 可以加载服务器端的字体
font-family: 'AhaoYw'; 指定一个元素的字体名称（其中AhaoYw名称可自定义）
src: url 字体文件路径确保链接正确，建议在采用的是相对路径，当然大家也可以使用绝路径。

其中 @font-face 可以加载服务器端的字体到浏览器端，这样我们就可以不受客户端字体库的限制。一般来说有四种格式的字体文件即可覆盖所有浏览器，这四种格分别如下

字体文件格式	适用于支持的浏览器
.EOT	Internet Explorer 4.0+
.TTF或.OTF	Firefox 3.5、Safari、Opera
.SVG	Chrome、IPhone
.WOFF	转为web字体指定的字体格式标准，被新版本浏览器广泛支持

页面样式调用加载

font-family：为字体名称，可自定义但是需要确保两次“font-family”引用的名称一致才行。例如加载span样式

span {
    font-family:“AhaoYw”;
}

附上一张引用自定义的效果图

OK，教程已结束，记录下以免下次用到，同时也给新手小白一丢丢帮助。