在站点网页中使用霞鹜文楷（LXGW WenKai）

2023-04-13

霞鹜文楷（LXGW WenKai）是一款开源中文字体，基于 FONTWORKS 出品字体 Klee One 衍生。该字体由 LXGW 自 Klee 增补。

本文就如何在网页、博客、站点中使用霞鹜文楷，做简单指引。

视觉图

Chawye Hsu 制作了适用于网页端的 lxgw-wenkai-webfont 。使用方法与添加 Google Font 等网页字体无异，先引入 Web Font CSS 样式，然后在自己的样式表中设置字体即可。

首先，在网页的<head>标签内适当位置引入字体 CSS。如果你希望使用屏幕阅读优化版本，请使用第二行。第一行为原始字体文件。二者引入其一即可。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/style.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/style.min.css">

上方的代码 href 采用了 jsDelivr 的源。如果你喜欢其他的 CDN 或者自托管，可以自己替换下。

接着，在你的 CSS 中设置字体。这根据上方引入何版本字体，设置不同的字体名称。同样地，二者选其一。

body {
    /* 原版 */
    font-family: "LXGW WenKai", sans-serif;
    /* 屏幕优化版 */
    font-family: "LXGW WenKai Screen", sans-serif;
}

清除你的浏览器缓存，即可看到效果。

# none

野生技术协会, 技术

添加新评论取消回复

12 条评论

陶小桃Blog

Apr 18, 2024 回复

用上了，感谢大佬！

筱枫

好耶！

听得入迷

May 15, 2024 回复

感谢大佬，用上了。

七龙猪

Oct 31, 2024 回复

谢谢谢谢，这篇有用！

wordpress设置自定义字体 R11; 七龙猪

Nov 1, 2024 回复

[...]在站点网页中使用霞鹜文楷（LXGW WenKai） - 枫茶舍 (hsiaofeng.com)[...]

花生

Jan 1, 2025 回复

筱枫你好，我是花生，申请转载这篇博文到我的博客园

你好，标明出处即可～

在站点网页中使用霞鹜文楷（LXGW WenKai） R11; 漫记

Aug 22, 2025 回复

[...]本文引用自：https://hsiaofeng.com/archives/224.html[...]

Pear

Sep 4, 2025 回复

感谢分享。虽然还不知道怎么改动typecho的主题来达到这个效果。

在主题涉及 <head> 标签的地方引用字体样式文件，然后修改 CSS 指定使用字体。

周庆刑事律师

Sep 20, 2025 回复

用上了，非常感谢！

Sep 21, 2025 回复

很高兴帮到你！

添加新评论 取消回复

12 条评论

添加新评论取消回复