solitude｜自定义站点字体

2024-11-19重置：增加中文网字计划的教程

阅前提示

请务必在选择使用字体前确认该字体已开源且可供个人使用/商用，如因下载使用非开源字体、商用已标明“不可商用”的字体等原因导致的侵权赔偿问题我方概不负责

两种方式均支持下载至博客本地进行引入，具体方式请根据教程自行微调即可

---

通过第三方css引入方式自定义

本教程中将使用中文网字计划的公共css作为示例

引入css

选择一个自己喜欢的字体（此处以霞鹜文楷屏幕阅读版为例）

进入字体详情页，找到通过链接嵌入部分

以下有两种引入方式，请根据自身需求任选其一：

• 在配置文件中引入
• 在custom.css文件中引入

找到配置文件的扩展部分，并在head下引入字体css文件

# Extend
# 扩展
extends:
  # Insert in head
  # 插入到 head
  head:
    - <link rel='stylesheet' href='https://chinese-fonts-cdn.deno.dev/packages/lywkpmydb/dist/LXGWWenKaiScreen/result.css' />
  # Insert in body
  # 插入到 body
  body:

• 已有custom.css文件
• 尚未创建custom.css文件

在custom.css文件内新增以下内容

@import "https://chinese-fonts-cdn.deno.dev/packages/lywkpmydb/dist/LXGWWenKaiScreen/result.css";

此处写入内容与中文网字计划的默认内容不同，请注意分辨！

在博客目录/source/css文件夹下新增custom.css文件，如source目录下无css文件夹请先新增文件夹

在文件内写入以下内容

@import "https://chinese-fonts-cdn.deno.dev/packages/lywkpmydb/dist/LXGWWenKaiScreen/result.css";

此处写入内容与中文网字计划的默认内容不同，请注意分辨！

设定字体

在配置文件中找到字体部分，并引入字体名称（中文网字计划的字体名称在css下方，此处示例中字体的名称为LXGW WenKai Screen）

# Font
# 字体
font:
  font-size: 16px
  code-font-size: 16px
  # Global font
  # 全局字体
  font-family: "LXGW WenKai Screen, PingFang SC, Hiragino Sans GB, Microsoft YaHei"
  # Code font
  # 代码字体
  code-font-family: 'LXGW WenKai Screen, "monospace", monospace'

本地启动hexo进行预览

hexo cl; hexo s

其它

如果您找到了其他的公益在线字体css文件，同理也可将该链接按照上述方法自行替换链接进行引入，随后重新部署即可查看效果

通过自托管字体文件方式自定义

自定义字体适用于*.eot(老版本IE)，*.otf，*.ttf，*.woff，*.woff2格式字体文件

以下教程请根据实际情况选择

配置css文件

• 已有custom.css文件
• 尚未创建custom.css文件

在custom.css文件内新增以下内容

@font-face {
  /* 为载入的字体取名字(随意) */
  font-family: '你的自定义字体名';        
  /* 字体文件地址(相对或者绝对路径都可以) */
  src: url(字体路径/字体文件名.文件后缀);
  /* 定义加粗样式(加粗多少) */
  font-weight: normal;
  /* 定义字体样式(斜体/非斜体) */
  font-style: normal;
  /* 定义显示样式 */
  font-display: block;
}

在博客目录/source/css文件夹下新增custom.css文件，如source目录下无css文件夹请先新增文件夹

在文件内写入以下内容

@font-face {
  /* 为载入的字体取名字(随意) */
  font-family: '你的自定义字体名';        
  /* 字体文件地址(相对或者绝对路径都可以) */
  src: url(字体路径/字体文件名.文件后缀);
  /* 定义加粗样式(加粗多少) */
  font-weight: normal;
  /* 定义字体样式(斜体/非斜体) */
  font-style: normal;
  /* 定义显示样式 */
  font-display: block;
}

上述属性定义

1. font-family属性值中使用webfont来声明使用的是服务器端字体，即设置文本的字体名称。
2. src属性值中首先指定了字体文件所在的路径。
3. format声明字体文件的格式，可以省略文件格式的声明，单独使用src属性值。
4. font-style：设置文本样式。取值：normal:不使用斜体；italic:使用斜体；oblique:使用倾斜体；inherit：从父元素继承。
5. 支持格式：*.eot(老版本IE)，*.otf，*.ttf，*.woff，*.woff2(推荐)

在主题配置文件中引入css文件

此处以solitude主题配置文件为例，其他主题请自行适配

如此前已引入该文件则无需重新引入

extends:
  head: # 在head中插入 / Insert in head
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

在主题配置文件中引入字体

在主题配置文件中找到字体引入部分，并在对应配置的最前面写上你的自定义字体名称

# Font
# 字体
font:
  font-size: 16px
  code-font-size: 16px
  # Global font
  # 全局字体
  font-family: "自定义字体名称, PingFang SC, Hiragino Sans GB, Microsoft YaHei"
  # Code font
  # 代码字体
  code-font-family: '自定义字体名称, "monospace", monospace'

本地启动hexo进行预览

hexo cl; hexo s

其它

如果您找到了他人公开的在线字体文件的链接，同理可将该链接写入css文件中，随后重新部署即可查看：

@font-face {
  /* 为载入的字体取名字(随意) */
  font-family: '你的自定义字体名';        
  /* 字体文件地址(相对或者绝对路径都可以) */
  src: url(他人的字体文件链接);
  /* 定义加粗样式(加粗多少) */
  font-weight: normal;
  /* 定义字体样式(斜体/非斜体) */
  font-style: normal;
  /* 定义显示样式 */
  font-display: block;
}

---

额外教程

因为很多站长（包括我自己）都是把hexo博客托管在vercel的，如果想要使用一些特殊的字体（没有公开的公益css文件可供引入），那么使用本地引入字体文件的方式将可能会导致字体文件的路径流量激增，严重的甚至还可能导致vercel服务超量、封号。因此我们还可以考虑github＋cloudflare pages的形式引入字体文件。具体操作方式如下：

1. 在github新建一个仓库，起一个喜欢的、合适的名字
2. 将字体文件上传至对应仓库（因该仓库仅作加载字体用途，为了不使用git上传可在创建时勾选“创建一个readme.md文件”）
3. 在cloudflare pages处新建项目，找到自己对应的github仓库
4. 无需配置任何环境变量，直接确认部署
5. 访问https://默认分配域名/文件路径/字体文件名.文件格式链接，如链接正确则可能会触发自动下载
6. 将对应链接写入css文件的url引入括号内
7. 部署，查看效果

注意事项

1. 上述步骤已默认您拥有cloudflare账号，且知晓cloudflare pages的新建位置。
2. 直接访问cloudflare默认分配域名无任何内容为正常现象，可放心使用
3. 如在github仓库将字体文件直接上传至根目录（外部无嵌套文件夹），则您访问对应链接时只需输入https://默认分配域名/字体文件名.文件格式即可
4. 也可绑定自己的域名进行引入，由于此配置并非必要，因此不再赘述（但绑定自己域名需将该域名托管至cloudflare）