如何修改自己网站的网页字体？

前言说明

一般网页内都是系统默认字体，还有就是调用的主题内置的字体，如果想自己更换字体，可以参考如下教程，本教程适合所有网页，不管是什么网页都是类似方法，所以不要纠结自己用的是WordPress还是帝国CMS什么的了，下面看看具体方法。

教程说明

1.修改字体肯定是需要字体啊，所以需要把字体下载到电脑，这里我以“HarmonyOS Sans”（华为鸿蒙字体）为例，首先自己到字体网站下载下来，得到自己的字体文件一般的后缀都是“.ttf”的字体格式

2.然后我们需要把字体转换为：eot、woff、woff2、svg、ttf 这五种的字体格式（含一种默认），大家可以去百度搜索“在线字体转换转换”，格式转好以后新建一个“font”文件夹，然后把5个格式的字体文件放在里面，然后上传至服务器中。

3.然后在网页的公共样式文件，也就是CSS文件中，按下面的样式保存：

CSS样式

/*字体*/
@font-face {
font-family: 'HarmonyOS';
src: url('../360mb-child/assets/font/HarmonyOS_Sans_Regular.eot');
src:
url('../360mb-child/assets/font/HarmonyOS_Sans_Regular.eot') format('embedded-opentype'),
url('../360mb-child/assets/font/HarmonyOS_Sans_Regular.woff2') format('woff2'),
url('../360mb-child/assets/font/HarmonyOS_Sans_Regular.woff') format('woff'),
url('../360mb-child/assets/font/HarmonyOS_Sans_Regular.ttf') format('truetype'),
url('../360mb-child/assets/font/HarmonyOS_Sans_Regular.svg') format('svg');
font-weight: normal;
font-style: normal;
}
*:not([class*="icon"]):not(i) {
font-family: "HarmonyOS" !important;
}

样式说明

上述样式文件中的说明如下，需要注意的是路径一定不要错，不然字体就不会成功调用，如果不确定是否成功可以去网页F12查看

• font-family 字体名称
• url 就是字体的路径

单独调用

如果需要单独调用，就在CSS中引用，如下参考的“font-family”属性

.urip_cated h4 {
	color: #1a274e;
	font-weight: 700;
	font-family: HarmonyOS
}

4.这样我们就成功修改了自己网页的字体了，如有什么不懂可在下面留言，看到我就会回复，帮助大家解决问题！