WordPress 引入霞鹜文楷最完美的方案

在网页设计中，字体是灵魂。“霞鹜文楷” (LXGW WenKai) 凭借其温润如玉的楷体笔触和极高的阅读舒适度，成为了无数站长的首选。

但中文字体包动辄 10MB+，直接加载会让网站慢得像蜗牛。今天，我将教你如何利用字体切片技术和公共 CDN，在不占用服务器资源的前提下，实现字体的秒开加载。

一、 为什么不能直接上传 .ttf 文件？

传统的字体加载方式是让用户下载整个字体包。而**字体切片技术（Subsetting）**会将几万个汉字拆分成几百个几 KB 的小包。用户访问网页时，浏览器只下载网页中出现的文字。

这样做的好处：

1. 流量极小： 首屏只需加载约 200KB-500KB 的字体片段。
2. 速度极快： 配合 CDN 加速，体验接近系统内置字体。

二、 方案：利用大厂公共 CDN（最推荐）

目前国内最稳定、且支持切片版霞鹜文楷的节点是 Eleme CDN（由饿了么提供支持）。

1. 在 WordPress 中引入 CSS

进入 WordPress 后台，页头代码添加如下代码：

<link rel='stylesheet' href='https://npm.elemecdn.com/lxgw-wenkai-screen-webfont@1.1.0/style.css' /> 

2. 应用字体样式

进入 外观 -> 自定义 -> 额外 CSS，添加以下样式代码：

body {
  font-family: 'LXGW WenKai Screen', PingFang SC, Source Han Sans CN, Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, sans-serif;
}

三、 进阶：如何确保字体加载“更稳快”？

除了引入代码，你还需要理解这两个“性能加速器”：

1. rel=”preconnect” (预连接)： 相当于提前给 CDN 服务器打招呼，把握手时间从正式下载中扣除，节省 100ms+。
2. font-display: swap： 这是一个用户体验优化技巧。它告诉浏览器：“如果字体还没下完，先用默认字体给用户看，别让页面空着。”

四、 常见问题 FAQ

Q1：我能把图片也传到这种 CDN 吗？

不行。 npm CDN 仅限存储代码库。如果你有大量的图片和视频，建议参考我的另一篇教程，使用 GitHub + jsDelivr 搭建私人图床。

Q2：如果 Eleme CDN 失效了怎么办？

你可以将代码中的域名替换为知乎的镜像：unpkg.zhimg.com，路径保持不变。

Q3：加载字体会产生很多请求吗？

是的，切片字体会产生几十个小请求。但只要你的 CDN 支持 HTTP/2（饿了么和知乎都支持），这些请求是并行下载的，完全不会拖慢速度。

结语

换上霞鹜文楷后，你的网站将瞬间从“工业风”转变为“书卷气”。优秀的排版不仅是为了美，更是为了读者的眼睛。

如果你在配置过程中遇到任何问题，欢迎在评论区留言交流！