前言说明
一般网页内都是系统默认字体,还有就是调用的主题内置的字体,如果想自己更换字体,可以参考如下教程,本教程适合所有网页,不管是什么网页都是类似方法,所以不要纠结自己用的是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.这样我们就成功修改了自己网页的字体了,如有什么不懂可在下面留言,看到我就会回复,帮助大家解决问题!
© 版权声明
本站网络名称:
青鹿云
本站永久网址:
www.milubk.com
网站侵权说明:
本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权请联系站长删除处理。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
THE END
暂无评论内容