关于本站字体-霞鹜文楷

2025-11-15 约 700 字预计阅读 2 分钟

其实我平时不怎么在意网页字体什么的，直到无意间看到了霞鹜文楷，真漂亮啊，而且免费开源可商用，于是就用上了。

字体来源

屏幕阅读版比原版更适用屏幕显示，区别其实不是很大，但是看着更顺眼一些。

安装方法

通用安装其实说明文档中写得很清楚了，直接将文后提供的链接以<link>的形式添加到网页的<head>内即可

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-web/style.css" />
<style>
    body {
    font-family: "LXGW WenKai Screen";
    font-weight: normal;
    }
</style>
</head>
<body>

</body>
</html>

FixIt主题安装霞鹜文楷字体
在FixIt主题的说明文档中其实也描述了，直接加一个全局覆盖css就可以。

以下字体样式均在 assets/css/_override.scss 中定义。自定义全局字体，霞鹜文楷屏幕阅读版:

1
2


@import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-web/style.css');
$global-font-family: 'LXGW WenKai Screen', $global-font-family;

自定义代码字体，以开源字体Fira Mono为例：

1
2


@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400,700&display=swap&subset=latin-ext');
$code-font-family: Fira Mono, $code-font-family;

Stack主题安装霞鹜文楷字体

先用最简单的方法，在\themes\hugo-theme-stack\layouts\partials\head里修改custom.html，写入字段<link>（或者写在本文件夹下其他文件也可以的，例如style.html，不过为了防止后期遗忘，建议所有自定义的内容都写在custom.html）：

1
2
3
4
5
6
7


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-web/style.css" />
<style>
  body {
    font-family: "LXGW WenKai Screen";
    font-weight: normal;
  }
</style>

但是并没能够完全更换全站字体，网站主题改了，文章列表和文章内的字体并没有更换成功。然后找到Stack主题说明文档中字体部分的表述，有专门提到修改Stack主题文章字体的描述，还是在custom.html写入下面的内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<style>
  /* Overwrite CSS variable */
  :root {
      --article-font-family: "LXGW WenKai Screen", var(--base-font-family);
  }
</style>  
<script>
  (function () {
      const customFont = document.createElement('link');
      customFont.href = "https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-web/style.css";

      customFont.type = "text/css";
      customFont.rel = "stylesheet";

      document.head.appendChild(customFont);
  }());
</script>

成功。