WordPress全局字体修改详细教程

前言

有很多时候,Wordpress的字体不能让我们满意,这个时候我们就可以通过一些方法来修改主题的默认字体,来达到我们想要的效果。

下面介绍的更换字体主要分为两种,第一种是直接调用系统的字体,来替换原来主题的默认字体;第二种则是使用自己的字体文件,来实现字体的替换。

第一种:直接调用

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

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

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

宋体(SimSun),微软雅黑(”Microsoft Yahei”),华文黑体(STHeiti)

冬青黑体( Hiragino Sans GB ),苹方(PingFang SC)

Arial,Times New Roman,Droid Sans

第二种:私有字体调用

既然是私有字体,那就一定无法从公共库中直接选择,必定要上传到某个服务端来进行加载。

这里可以选择:1.上传至网站服务器 2.上传至Github(推荐)3.上传至私有云存储进行调用

在这之前需要先做一项准备工作,我们手上的字体文件通常只有一种格式,而为了满足不同浏览器的需要,我们需要将其扩展为五种格式,分别为.ttf .eot .woff .woff2 .svg

百度搜索就可以找到在线转换的工具,例如这个:在线字体转换

1.上传至网站服务器

这种方法面临这一种风险,中文字体库体积通常很大,比如我现在正在使用的思源黑体,一个ttf文件就有8M多,再加上国内服务器的小带宽,肯定导致网站加载时间大大加长。

将你前面准备好的五种字体格式全部上传到网站的一个文件夹内,比如我放在/fonts文件夹内,且统一命名,比如siyuan.ttf,siyuan.svg等等。

在自定义CSS样式中输入下列代码:

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

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

2.上传至Github使用免费的jsDelivr CDN加速

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

jsDelivr调用格式 https://cdn.jsdelivr.net/gh/Github用户名/仓库名/具体路径

svg文件大多会超过20M,评论区小伙伴提醒jsDelivr调用文件超过20M会报错,可以使用其他方式加载svg,不过留在上面也没什么问题,因为正常是不会使用到的。

附上几个字体的调用链接(托管于Github,使用jsDelivr加速服务)

AdobeCleanHanSC

@font-face {
font-family: 'AdobeCleanHanSC';
src: url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.eot');
src:
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.eot') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.ttf') format('truetype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.svg') format('svg');
font-weight: 400;
font-style: normal;
font-display: swap;
}
*:not([class*="icon"]):not(i) {
font-family: "AdobeCleanHanSC" !important;
}

思源黑体

@font-face {
font-family: 'siyuan';
src: url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.eot');
src:
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.eot') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.ttf') format('truetype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.svg') format('svg');
font-weight: 400;
font-style: normal;
font-display: swap;
}
*:not([class*="icon"]):not(i) {
font-family: "siyuan" !important;
}

筑紫A丸

@font-face {
font-family: 'AWan';
src: url ('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/Awan.eot');
src:
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.eot') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.ttf') format('truetype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.svg') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
*:not ([class*="icon"]):not (i) {
font-family: "AWan" !important;
}

3.上传至云存储进行调用

在个人服务器上存储字体文件的话,服务器需要在加载网页,图片等的同时等待加载字体,但如果使用云存储调用的话就可以在很大程度上解决网站加载慢的问题。

云服务的话有很多选择,如果你的网站还没有开启HTTPS的话,可以去使用免费的七牛云存储,如果开启了HTTPS的话可以申请使用免费的又拍云存储或者使用收费的阿里云OSS。下面以阿里云OSS和又拍云云存储为例进行演示。

首先,将你先前准备好的四种格式的字体文件上传至你的云存储中,云储存需设置为公有读权限。

然后进入基础设置->防盗链,将你的域名添加进去,允许空Refer,记得加http(s)://,如下图所示。

接着设置跨域规则,将你的域名添加进去,同样需要加http(s)://,允许Headers处填写*


接下来就可以去自定义CSS了,填写以下代码:

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

至于又拍云,在云存储配置完成后使用FTP工具登陆云存储空间并进行上传后,即可使用文件的URL地址来进行使用。

又拍云的云存储连接方式可参考官方文档:文件管理指南 – 又拍云存储

这样就大功告成啦,登上你的网站看看吧!

总结

由于目前还没有很全的字体库,所以第二种方法应该使用的比较多的。

如果你的服务器带宽足够大,或者开了什么加速的话,将字体文件放在网站服务器上绝对是没什么问题的,但没有的话还是建议使用一个云存储来帮助你的网站加载那庞大的字体库。

P.S.有个程序叫字蛛,可以缩小网站字体体积,不过我试了一下没有成功,大家也可以照这个方向去研究研究。

字蛛只支持静态html压缩字体体积,所以Wordpress无法直接使用。

 

评论

  1. ki
    Windows Edge
    5月前
    2020-4-24 23:39:50

    博主的字体咋这么好看,我也是用 AdobeCleanHanSC 不给我那个不忍直视


    查看图片
    我的效果图


    我这是少了点啥吗?

    • Ratodo 博主
      Windows Chrome
      5月前
      2020-4-24 23:47:48

      这种情况应该是没加载出来,可能是CSS未生效,也可能是字体源文件链接失效。

      • ki
        Windows Edge
        5月前
        2020-4-24 23:54:24

        我用的是这篇文章的css代码,他失效了吗?
        顺便问下如何实现 终端+浏览器功能的标签😁

        • Ratodo 博主
          Windows Chrome
          5月前
          2020-4-24 23:59:56

          文章提供的CSS代码没有失效,请自行排查一下CSS是否配置生效;关于终端+浏览器显示,这里的方案是主题自带,如果是其他主题,可以参考这篇文章

          • ki
            Windows Edge
            5月前
            2020-4-25 0:10:54

            好的,谢谢

          • Ratodo 博主
            Windows Chrome
            5月前
            2020-4-25 1:56:45

            刚刚朋友提醒才发现了问题,源代码有个标点符号错了,现在已经修正,可以再次尝试一下~

  2. 池ヶ谷シオ
    Windows Firefox
    6月前
    2020-4-10 21:39:48

    请问博主的字体没有做其他改动吗,这个渲染效果我还以为我开了Mactype

    • Ratodo 博主
      Windows Chrome
      6月前
      2020-4-10 21:47:21

      没有其他改动哦,只是在自定义CSS里面调用了字体而已~

  3. Cw
    Windows Chrome
    6月前
    2020-3-24 9:48:38

    我这字体转化某一个格式都有60mb 555

    • Ratodo 博主
      Windows Chrome
      6月前
      2020-3-24 15:14:38

      这么恐怖的吗?😳

    • MoeWang
      Windows Chrome
      6月前
      2020-4-02 10:38:00

      是筑紫A丸么,我的那个解出来得有59MB,枯了,里面很多没用的字符

      • Ratodo 博主
        Windows Chrome
        已编辑
        6月前
        2020-4-02 12:34:39

        我去试了一下,从宁静之雨公众号下载的筑紫 A 丸,经过转换之后最常调用的 woff2 只有 4.98M

        查看图片
        批注 2020-04-02 122759.png

        我把它上传到 Github 上用 jsDelivr 的加速服务,代码在下面,你可以调用一下看看是不是你想要的字体~

        @font-face {
        font-family: 'AWan';
        src: url ('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/Awan.eot');
        src:
        url ('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.eot') format ('embedded-opentype'),
        url ('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.woff2') format ('woff2'),
        url ('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.woff') format ('woff'),
        url ('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.ttf') format ('truetype');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
        }
        *:not ([class*="icon"]):not (i) {
        font-family: "AWan" !important;
        }
        • MoeWang
          Android Chrome
          6月前
          2020-4-02 14:21:13

          是的,现在已经用上了,点我博客就能看到了,阿里嘎多!

        • MoeWang
          Android Chrome
          6月前
          2020-4-02 14:35:18

          提醒一下,svg可能调用不了,jsdelivr最大限制20MB

          • Ratodo 博主
            Windows Chrome
            6月前
            2020-4-02 14:37:53

            把svg删掉也没什么关系,svg调用很少用到,现在大多都是woff2~另外,我去贵站申请友链了,望通过

  4. stgmsa
    iPhone Chrome
    12月前
    2019-10-17 20:34:35

    巨佬的字体在windows chrome下的渲染 效果拔群,能分享下具体用了什么字体?做了哪些调整么?

    • Ratodo 博主
      Windows Chrome
      12月前
      2019-10-17 21:07:46

      用的是思源黑体 🙂 是宁静之雨大大分享的版本哦,在他的公众号回复思源黑体就行了!font-weight设置为500 😳

  5. MoeWang
    Windows Chrome
    1年前
    2019-8-21 21:28:05

    枯了…用的第二种,也就是上传到oss对象存储的那种方式,访问oss上的字体文件没问题,但是写道wordpress的自定义css就不好使。。。怀疑是不是Font Awesome和它冲突了…

    • Ratodo 博主
      iPhone Safari
      1年前
      2019-8-21 22:43:30

      可能是冲突了吧,我这边没有用font awesome,你可以先停用试试

  6. 一芦居
    Android Chrome
    2年前
    2019-3-21 23:35:22

    有个网站叫做“有字库”是收费的,还有wp插件,你可以看看

    • Ratodo 博主
      Windows Chrome
      2年前
      2019-3-22 21:16:36

      这个我试过~12月上传的字体到现在还是审核中… 😀

  7. 灰常记忆
    Android Chrome
    2年前
    2018-12-31 15:45:47

    😛 还折腾字体,放在自己的主机上就好。

    • Ratodo 博主
      Android Chrome
      2年前
      2018-12-31 15:51:03

      国内1Mbps加载太慢了,最小的woff2格式都有3M多,还是放在云存储上快一点 😀

发送评论 编辑评论


|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇