更改并导入自定义字体

本博客之前的使用的字体为主题默认字体，为避免各种纠纷，本站将采用开源的霞鹜文楷

关于这个字体

霞鹜文楷

An open-source Chinese font derived from Fontworks’ Klee One. 一款开源中文字体，基于 FONTWORKS 出品字体 Klee One 衍生。

链接

该字体LxgwWenKai@Github | 该字体Webfont@Github | unpkg | jsdelivr

使用方式

电脑

访问该字体官网，并在 Release 中下载最新版字体的 .ttf 文件。

安装字体并使用软件实现系统字体更改。

手机

进入永硕Ｅ盘、蓝奏云(密码: 8ppk)找到 magisk 模块并刷入，需要手机有 root 权限。

网站

方式一

使用 NPM 包管理器

First, install the package via npm or yarn.

npm install --save lxgw-wenkai-webfont
# or Lite version
npm install --save lxgw-wenkai-lite-webfont
# or TC version
npm install --save lxgw-wenkai-tc-webfont
# or Screen version
npm install --save lxgw-wenkai-screen-webfont

Then import style.css to your main css style file and update the font-family.

@import 'lxgw-wenkai-webfont/style.css';
/* Lite version */
@import 'lxgw-wenkai-lite-webfont/style.css';
/* TC version */
@import 'lxgw-wenkai-tc-webfont/style.css';
/* Screen version */
@import 'lxgw-wenkai-screen-webfont/style.css';
body {
  font-family: "LXGW WenKai", sans-serif;
  /* Lite version */
  font-family: "LXGW WenKai Lite", sans-serif;
  /* TC version */
  font-family: "LXGW WenKai TC", sans-serif;
  /* Screen version */
  font-family: "LXGW WenKai Screen", sans-serif;
}

/* Mono font (optional) */
pre,code {
  font-family: "LXGW WenKai Mono", sans-serif;
  /* Lite version */
  font-family: "LXGW WenKai Mono Lite", sans-serif;
  /* TC version */
  font-family: "LXGW WenKai Mono TC", sans-serif;
}

方式二

使用 CDN 引入

Put the jsDelivr <link> into your html head, then update the font-family.

<html>
<head>
  <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/[email protected]/style.css" />
  <!-- Lite version -->
  <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/[email protected]/style.css" />
  <!-- TC version -->
  <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/[email protected]/style.css" />
  <!-- Screen version -->
  <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/[email protected]/style.css" />
  <style>
    body {
      font-family: "LXGW WenKai", sans-serif;
      /* Lite version */
      font-family: "LXGW WenKai Lite", sans-serif;
      /* TC version */
      font-family: "LXGW WenKai TC", sans-serif;
      /* Screen version */
      font-family: "LXGW WenKai Screen", sans-serif;
    }
  </style>
</head>
<body>
  <!-- Your code -->
</body>
</html>

方式三

使用特定粗细的字体

@import 'lxgw-wenkai-webfont/lxgwwenkai-regular.css';
@import 'lxgw-wenkai-webfont/lxgwwenkai-bold.css';
body {
  font-family: "LXGW WenKai", sans-serif;
}