在站点网页中使用霞鹜文楷(LXGW WenKai)

霞鹜文楷(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.bootcdn.net/ajax/libs/lxgw-wenkai-webfont/1.6.0/style.min.css" />
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/style.min.css" />

CSS 镜像地址的源在 cdnjs,上方的代码 href 采用了中国大陆的 BootCDN 的源。如果你喜欢其他的 cdnjs 下游源,可以自己替换下。

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

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

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

添加新评论


5 条评论

    Apr 18, 2024 回复

    用上了,感谢大佬!

      Apr 18, 2024 回复

      好耶!



    May 15, 2024 回复

    感谢大佬,用上了。


    Oct 31, 2024 回复

    谢谢谢谢,这篇有用!


    Nov 1, 2024 回复

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