转载文章: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的不需要上传)eotsvgttfwoff上传到对象存储中即可。

那么在WordPress如何使用?

根据webfontloader教程得知配置:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/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群

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


永远年轻,永远热泪盈眶。