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

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

https://lxgw.github.io/
https://github.com/chawyehsu/lxgw-wenkai-webfont

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

首先，在网页的标签内适当位置引入字体 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 中设置字体。这根据上方引入何版本字体，设置不同的字体名称。同样地，二者选其一。

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

 

或者直接使用

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cn-fontsource-lxgw-wen-kai-gb-screen/font.css"></link>
<style>
  html{
    font-family: Roboto, "LXGW WenKai GB Screen", sans-serif;
  }
</style>

 

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