Dreaming

WP自定义网页字体

作者：

leng

在

转载文章：WP自定义网页字体 – https://iiong.com/wordpress-custom-web-font.html

前言

今天在群里和一个朋友讨论网页字体美化的方案，因为跨平台原因，总是找不到合适的中文字体渲染方案。

 

再此之前我研究过类似的，那时候直接从ttf字体文件提取汉字常用字的web font，加载到网页会出现大量的空白网页等待时间，故总结：

  • 字体过大
  • Web字体文件下载太慢，宽带不足
  • font-family没有适当配置好

准备

总结上面几点，主要还是做个异步加载，就是在加载中web font期间渲染的是系统自带的字体。Google搜索下的确有一个方案：Web Font Loader

既然有这个库很好办，所以我们需要准备什么？

打开FontMin工具，将汉字常用字体的内容复制进去，再将字体拖进去点击生成，大概一分钟后自动打开个文件夹，里面包含Web ont字体：

QQ截图20180517224831.png

石锤教材

得到字体后下面基本简单了，简单的来说就是这样：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="hyxb.css" rel="stylesheet" type="text/css">
    <style type="text/css" rel="stylesheet">
        .aaa {
            font-family: "hyxb";/*hyxb是你的字体声明（一般是你命名的字体文件名）*/
        }
    </style>
</head>
<body>
<div class="aaa">
    捌扒叭吧笆八疤巴拔跋靶
    把耙壩坝
    汹雄熊休修羞朽嗅銹锈秀袖繡
    绣墟戌需虛虚噓嘘須须徐許许蓄酗敘
    叙旭序畜恤絮婿緒绪續续軒轩喧
    宣懸悬旋玄選选癬癣眩絢绚靴薛
    學学穴雪血勳勋熏循旬詢询尋寻
    馴驯巡殉汛訓训訊讯遜逊迅壓压
    押鴉鸦鴨鸭呀丫芽牙蚜崖衙涯
    雅啞哑亞亚訝讶焉咽閹阉煙烟淹鹽
</div>
</body>
</html>
HTML

根据上面得知引入生成的css文件，然后声明字体类型就行了。

既然得到字体后，个人不建议放在小宽带的服务器里面，绝大部分提取的字体基本上兆，建议存放对象存储里，例如七牛云、又拍云等。

你只需要把css（带xxxxx-embed的不需要上传）、eot、svg、ttf、woff上传到对象存储中即可。

那么在WordPress如何使用？

根据webfontloader教程得知配置：

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/webfontloader@1.6.28/webfontloader.js"></script>
<script type="text/javascript">
    WebFont.load({
        custom: {
            families: ['hyxb'],
            urls: ['//cdn.com/fonts/hyxb/hyxb.css'] //这里引入你上传到对象存储的css文件
        }
    });
</script>
JavaScript

把上面的脚本放在footer.php的</body>前面，注意，是前面，不是后面即可，放在页脚主要加速网页加载。

然后在你的css文件（同样在wp设置-额外的css里填写内容也可以），添加代码：

html.wf-active body {
    font-family: '你的字体声明（一般是你命名的字体文件名）', sans-serif;
}
CSS

基本上字体美化就可以了，至于其他的需要你自己慢慢调整了。

交流

如果你使用有任何问题，请加群交流：

添加QQ群

当然了，群里有编译好的字体，拿来即用！

评论

《 “WP自定义网页字体” 》 有 3 条评论

  1. 广安养老院 的头像
    广安养老院

    文章很好值得一看

    回复
  2. 武胜 的头像
    武胜

    支持一下

    回复
  3. boke112导航 的头像
    boke112导航

    对于字体平时我倒是很少折腾，感觉直接默认的就好

    回复

回复 boke112导航 取消回复

您的邮箱地址不会被公开。 必填项已用 * 标注

更多文章