文章目录[隐藏]

前言说明

一般网页内都是系统默认字体,还有就是调用的主题内置的字体,如果想自己更换字体,可以参考如下教程,本教程适合所有网页,不管是什么网页都是类似方法,所以不要纠结自己用的是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.这样我们就成功修改了自己网页的字体了,如有什么不懂可在下面留言,看到我就会回复,帮助大家解决问题!

发表回复

后才能评论