WordPress 主题修改全局字体详细教程

今天我们分享下比较实用的 wordpress 主题修改全局字体详细教程,有时候 WordPress 的字体不能让我们满意,这个时候我们就可以通过一些方法来修改主题的默认字体,来达到我们想要的效果。下面介绍的更换字体主要分为两种,第一种是直接调用系统的字体,来替换原来主题的默认字体;第二种则是使用自己的字体文件,来实现字体的替换。

第一种:

这种方法通过修改 CSS 文件就可以实现,有些主题自带了自定义 CSS 样式的设置,Wordpress 也提供了这一入口(后台管理 -> 外观 -> 自定义 CSS),这时候我们就可以直接在里面填上:

  1. *:not([class*="icon"]):not(i) {
  2. font-family: Segoe UI, "Microsoft Yahei" !important;
  3. }

上面的例子就是将字体全局优先替换成 Segio UI,其次替换成微软雅黑,下面列举几个比较适合阅读的字体,供大家替换,替换代码中的 Segio UI 和 Microsoft YaHei 即可。

第二种:

既然是私有字体,那就一定无法从公共库中直接选择,必定要上传到某个服务端来进行加载。这里可以选择:1. 上传至网站服务器 2. 上传至 Github(推荐)3. 上传至私有云存储进行调用在这之前需要先做一项准备工作,我们手上的字体文件通常只有一种格式,而为了满足不同浏览器的需要,我们需要将其扩展为五种格式,分别为.ttf .eot .woff .woff2 .svg。百度搜索就可以找到在线转换的工具,例如这个:在线字体转换
1、这种方法面临这一种风险,中文字体库体积通常很大,比如我现在正在使用的思源黑体,一个 ttf 文件就有 8M 多,再加上国内服务器的小带宽,肯定导致网站加载时间大大加长。

将你前面准备好的五种字体格式全部上传到网站的一个文件夹内,比如我放在 /fonts 文件夹内,且统一命名,比如 siyuan.ttf,siyuan.svg 等等。在自定义 CSS 样式中输入下列代码:

  1. @font-face {
  2. font-family: '随便一个名称,需要和下面的保持对应';
  3. src: url('../fonts/yourfont.eot');
  4. src:
  5. url('../fonts/yourfont.eot') format('embedded-opentype'),
  6. url('../fonts/yourfont.woff2') format('woff2'),
  7. url('../fonts/yourfont.woff') format('woff'),
  8. url('../fonts/yourfont.ttf') format('truetype'),
  9. url('../fonts/yourfont.svg') format('svg');
  10. font-weight: normal;
  11. font-style: normal;
  12. }
  13. *:not([class*="icon"]):not(i) {
  14. font-family: "与上面起的名字的对应" !important;
  15. }

个人不是很推荐这种方法,建议还是使用下面的云存储托管。

2. 上传至 Github 使用免费的 jsDelivr CDN 加速,jsDelivr 如何如何好用这边就不多说了,Github 怎么使用这边也不多说了,大体方法就是将你的字体文件上传至 Github 自己的仓库中,然后使用 jsDelivr 提供的加速服务来调用,方便好用还不要钱。

jsDelivr 调用格式 https://cdn.jsdelivr.net/gh/Github 用户名 / 仓库名 / 具体路径 svg 文件大多会超过 20M,评论区小伙伴提醒 jsDelivr 调用文件超过 20M 会报错,可以使用其他方式加载 svg,不过留在上面也没什么问题,因为正常是不会使用到的。附上几个字体的调用链接(托管于 Github,使用 jsDelivr 加速服务):
AdobeCleanHanSC

  1. @font-face {
  2. font-family: 'AdobeCleanHanSC';
  3. src: url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.eot');
  4. src:
  5. url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.eot') format('embedded-opentype'),
  6. url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.woff2') format('woff2'),
  7. url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.woff') format('woff'),
  8. url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.ttf') format('truetype'),
  9. url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.svg') format('svg');
  10. font-weight: 400;
  11. font-style: normal;
  12. font-display: swap;
  13. }
  14. *:not([class*="icon"]):not(i) {
  15. font-family: "AdobeCleanHanSC" !important;
  16. }

思源黑体

  1. @font-face {
  2. font-family: 'siyuan';
  3. src: url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.eot');
  4. src:
  5. url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.eot') format('embedded-opentype'),
  6. url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.woff2') format('woff2'),
  7. url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.woff') format('woff'),
  8. url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.ttf') format('truetype'),
  9. url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.svg') format('svg');
  10. font-weight: 400;
  11. font-style: normal;
  12. font-display: swap;
  13. }
  14. *:not([class*="icon"]):not(i) {
  15. font-family: "siyuan" !important;
  16. }

筑紫 A 丸

  1. @font-face {
  2. font-family: 'AWan';
  3. src: url ('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/Awan.eot');
  4. src:
  5. url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.eot') format('embedded-opentype'),
  6. url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.woff2') format('woff2'),
  7. url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.woff') format('woff'),
  8. url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.ttf') format('truetype'),
  9. url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.svg') format('svg');
  10. font-weight: normal;
  11. font-style: normal;
  12. font-display: swap;
  13. }
  14. *:not ([class*="icon"]):not (i) {
  15. font-family: "AWan" !important;
  16. }

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/76625

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注

51建站客服微信二维码
点击这里购买