Solitude引入自定义字体

2792分钟2025-08-07245甘肃

文章摘要

本文介绍了CSS规则@font-face的使用方法，该规则允许开发者将本地或外部的字体文件加载到网页中。文章以钉钉的免费字体JinBuTi为例，详细说明了如何下载、复制字体文件到指定目录、重命名以及创建custom.css文件定义字体名称、路径和格式。最后，指导读者在solitude主题配置文件中添加字体，并一键完成设置。

@font-face 是一种 CSS 规则，它允许开发者定义网页中使用的字体，并为其指定来源。通过 @font-face，你可以将本地的字体文件（如 .ttf、.woff、.woff2 等）加载到网页中，或者引用外部的字体文件。

首先你应该找一个喜欢的字体，然后将字体文件下载下来，例如我使用了钉钉的免费字体 JinBuTi ，下载解压后打开文件夹，将 DingTalk JinBuTi.ttf 文件复制到博客目录下的 \source\font 文件夹中，为了方便使用，可以将字体文件重命名为 JinBuTi.ttf 。

在博客根目录下的source文件夹中，新建一个css文件夹，然后新建 custom.css 文件

YAML

@font-face {  
    font-family: 'JinBuTi';  /* 定义字体名称 */  
    src: url('/font/JinBuTi.ttf') format('truetype');  /* 字体文件路径及格式 */  
    font-weight: normal;  /* 字体粗细 */  
    font-style: normal;   /* 字体样式 */  
}

当你操作完上边这些内容就可以在solitude主题配置文件中进行添加你的字体啦