Dragon

(美化)WordPress 网站添加自定义字体

2022-10-31 12:38 36 抢沙发 阿峰博客

背景

通过 CSS 属性@font-face 和 font-family 可以实现加载自定义web font,改变网页字体,实现美化效果。
(美化)WordPress 网站添加自定义字体插图

1.引用字体文件

出于版权风险考虑,尽量使用免费可商用的字体作为 web font。
本文教程使用的为站酷仓耳渔阳字体,是站酷发布的免费可商用字体。
字体下载地址:https://www.zcool.com.cn/special/zcoolyytfonts
需要通过@font-face 属性引用 web font。
引用实例:

@font-face {
font-display: swap;
font-family: 'afengblogfont';
src: url('https://libs.afengim.com/font/typeface/file/TsangerYuYangT/TsangerYuYangT-W03.woff2') format('woff2');
url('https://libs.afengim.com/font/typeface/file/TsangerYuYangT/TsangerYuYangT-W03.woff') format('woff');
url("https://libs.afengim.com/font/typeface/file/TsangerYuYangT/TsangerYuYangT-W03.eot");
url("https://libs.afengim.com/font/typeface/file/TsangerYuYangT/TsangerYuYangT-W03.eot?#iefix") format('embedded-opentype'),
}

属性详解:
font-display  swap 属性可以实现在 web font 未加载完成前使用浏览器默认字体渲染文本,当 web font 加载成功后再替换自定义字体,避免出现网页文本空白现象,影响用户阅读及体验。
font-family 属性在此可以自定义web font 的名称,以便在其他 css 样式中引用该名称,如此处使用的名称为:afengblog
src 需要填写 web font url,可以引用多个字体文件,但需要通过 format 定义该字体的格式,以便在多种浏览器中兼容,如:woff woff2 ttf

2.设置元素字体

引用完字体文件后需要通过 font-family 属性定义该元素的字体,如下示例:

html {
font-family: "afengblogfont", sans-serif;
font-weight: 400;
font-style: normal;
}

font-family 属性填写引用字体文件设置的 font-family 属性名称

最终示例:

@font-face {
font-display: swap;
font-family: 'afengblogfont';
src: url('https://libs.afengim.com/font/typeface/file/TsangerYuYangT/TsangerYuYangT-W03.woff2') format('woff2');
url('https://libs.afengim.com/font/typeface/file/TsangerYuYangT/TsangerYuYangT-W03.woff') format('woff');
url("https://libs.afengim.com/font/typeface/file/TsangerYuYangT/TsangerYuYangT-W03.eot");
url("https://libs.afengim.com/font/typeface/file/TsangerYuYangT/TsangerYuYangT-W03.eot?#iefix") format('embedded-opentype'),
}
html {
font-family: "afengblogfont", sans-serif;
font-weight: 400;
font-style: normal;
}

WordPress可以添加至主题根目录 style.css 文件的开头或添加到 外观>自定义>额外 CSS 内,无需添加 style 标签。

「点点赞赏,手留余香」

还没有人赞赏,快来当第一个赞赏的人吧!

阿峰博客给阿峰博客打赏
×
予人玫瑰,手有余香
  • 1
  • 5
  • 10
  • 20
  • 50
1
支付

本文为原创文章,版权归所有,欢迎分享本文,转载请保留出处!

2022-10-31

2022-10-31

发表评论

本站已严格贯彻落实《互联网跟帖评论服务管理规定》 注册账号需绑定并验证手机号真实性
  • 您可享受35%的返佣现金哦~