当前位置：首页 > news >正文

告别繁琐配置！SiYuan字体自动化部署终极指南：让知识管理更具个性化

news 2026/4/29 4:37:05

告别繁琐配置！SiYuan字体自动化部署终极指南：让知识管理更具个性化

【免费下载链接】siyuanA privacy-first, self-hosted, fully open source personal knowledge management software, written in typescript and golang.项目地址: https://gitcode.com/GitHub_Trending/si/siyuan

SiYuan是一款注重隐私保护的自托管开源个人知识管理软件，采用TypeScript和Golang开发。本文将为你详细介绍如何轻松实现SiYuan的字体自动化部署，让你的知识管理环境更符合个人使用习惯。

为什么需要字体自动化部署？

在使用SiYuan进行知识管理时，合适的字体设置能够极大提升阅读和编辑体验。默认字体可能无法满足所有人的需求，而手动配置字体往往需要繁琐的步骤。通过字体自动化部署，你可以一键切换心仪字体，让SiYuan真正成为你的个性化知识管理工具。

SiYuan字体管理的核心配置文件

SiYuan的字体配置主要集中在以下几个核心文件中：

编辑器配置文件：app/src/config/editor.ts，这里定义了字体家族、字号等关键设置。
类型定义文件：app/src/types/config.d.ts，包含了字体相关的类型定义。
资源工具文件：app/src/util/assets.ts，负责字体资源的加载和管理。

字体自动化部署的准备工作

1. 了解SiYuan的字体目录结构

SiYuan的字体文件存放在app/appearance/fonts目录下，目前包含以下几种字体：

JetBrainsMono-2.304
LxgwWenKai-Lite-1.501
Noto-COLRv1-2.047

这些字体文件会在SiYuan启动时自动加载，为应用提供基础的字体支持。

2. 准备自定义字体文件

如果你有特别喜欢的字体，可以将其准备好，后续我们会介绍如何将这些字体添加到SiYuan中并实现自动化部署。

字体自动化部署的具体步骤

1. 配置字体设置界面

SiYuan提供了直观的字体设置界面，你可以通过以下步骤进行配置：

打开SiYuan应用
进入设置界面
选择"编辑器"选项卡
在字体设置区域进行相关配置

在app/src/config/editor.ts文件中，你可以看到字体设置的相关代码实现：

${window.siyuan.languages.font} <div class="b3-label__text">${window.siyuan.languages.font1}</div> <input readonly="readonly" placeholder="${window.siyuan.languages.default}" id="fontFamily" class="b3-text-field fn__flex-center fn__size200" style="font-family:'${window.siyuan.config.editor.fontFamily}',var(--b3-font-family);" value="${window.siyuan.config.editor.fontFamily}"/>

2. 实现字体的自动加载

SiYuan通过app/src/util/assets.ts文件实现字体的自动加载，关键代码如下：

@font-face { font-family: "Emojis Additional"; src: url(${servePath}appearance/fonts/Noto-COLRv1-2.047/Noto-COLRv1.woff2) format("woff2"); }

这段代码定义了字体的加载方式，SiYuan会自动从指定路径加载字体文件。

3. 使用开发者工具调试字体样式

如果你需要自定义字体样式，可以使用浏览器的开发者工具进行调试。SiYuan的界面元素可以通过开发者工具进行实时修改和预览。

字体自动化部署的高级技巧

1. 设置字体大小的滚轮缩放

SiYuan支持使用鼠标滚轮调整编辑器的字体大小，你可以在设置中开启这个功能：

${window.siyuan.languages.fontSizeScrollZoom} <div class="b3-label__text">${window.siyuan.languages.fontSizeScrollZoomTip.replace("Ctrl", updateHotkeyTip("⌘"))}</div> <input class="b3-switch fn__flex-center" id="fontSizeScrollZoom" type="checkbox"${window.siyuan.config.editor.fontSizeScrollZoom ? " checked" : ""}/>

2. 配置代码片段的字体

对于代码片段，SiYuan使用了专门的等宽字体，你可以在app/src/config/util/snippets.ts中进行配置：

<textarea class="fn__block b3-text-field" placeholder="${window.siyuan.languages.codeSnippet}" style="resize: vertical;font-family:var(--b3-font-family-code)" spellcheck="false"></textarea>