思源自定义字体

效果图：修改自定义字体，这里是筑紫 A 丸，下载

​​

思源本身支持系统自带字体，但是默认只修改编辑区的字体，如果需要修改其他地方的字体，则需要修改 css。

这里推荐使用社区的插件： 「自定义字体」，能够方便的对不同区域的字体进行设置。

来源：Zuoqiu-Yingyi/siyuan-plugin-custom-font （不是我的，没有广告的意思，主要是促进思源插件发展，很多开发者的插件被使用后没有反馈，导致开源精神不振，如果有所帮助，给他点个 star 吧。

具体步骤

非系统自带的字体，这部分字体则需要 css 引入。你可以在字体插件中引入，也可以在思源的「设置」→「外观」→「自定义代码」的 csss 部分进行设置。

1. 字体文件放置

   1. 打开工作空间目录
      ​​
   2. 点开笔记工作区文件夹 →data 文件文件夹，创建一个用于存放字体的文件夹 fonts，
   3. 将字体文件放在 fonts 文件夹下面
      ​​

2. 字体引入，文件路径是相对于 data 目录的，这里需要注意

   @font-face {
     font-family: 'ZZAW';
     src: url('public/fonts/zhuziawan.ttf') format('truetype');
   }
   

   代码讲解：

   • @font-face​ 用于在网页中引入自定义字体。在这段代码中：

   • ​font-family​ 指定了自定义字体的名称为 "ZZAW"。

   • ​src​ 属性指定了字体文件的路径为 "public/fonts/zhuziawan.ttf"，并且指定了字体文件的格式为 truetype​。

   这里需要注意的是 format，它对应着字体的格式，ttf​的字体 →truetype​，woff​→woff​，更多格式参考：Font MIME Types (mozilla.org)

3. 设置字体，这里推荐使用插件「自定义字体」定义，更加直观：之前引入的字体名称放到需要设置的地方首行即可
   （如果是在设置中的外观中设置，你只需要遵循 css 的规范即可。）
   ​

‍

外观中设置 css 示例（不推荐）

如果是自己在外观中定义 css，需要自己检查元素

打开开发者 ctrl+shift+i，然后检查元素，找元素的 class 选择器即可。

css 设置示例：

@font-face {
  font-family: 'ZZAW';
  src: url('public/fonts/zhuziawan.ttf') format('truetype');
}

:root {
    --b3-font-family: "ZZAW", "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
    --b3-font-family-protyle: "ZZAW";
    --b3-font-family-emoji: "Twemoji Mozilla", "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Noto Color Emoji", "Android Emoji";
}