Zotero-Better-Notes中的字体设置：自定义笔记显示效果

Zotero-Better-Notes中的字体设置：自定义笔记显示效果

【免费下载链接】zotero-better-notes Everything about note management. All in Zotero. 项目地址: https://gitcode.com/gh_mirrors/zo/zotero-better-notes

1. 字体配置基础：了解CSS文件结构

Zotero-Better-Notes的字体显示效果由多个级联样式表（CSS）控制，主要分布在以下路径：

addon/chrome/content/lib/css/
├── github-markdown.css  # 主笔记样式
├── dx.light.compact.css # UI组件样式
└── katex.min.css        # 公式渲染样式

这些文件通过font-family和font-size属性定义不同界面元素的字体特性。例如主笔记区域的默认配置：

/* github-markdown.css 第155-156行 */
.markdown-body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif;
    font-size: 16px;
}

2. 核心字体配置项解析

2.1 文本层级与字体大小

系统采用相对字体大小设计，形成清晰的视觉层级：

元素类型	CSS选择器	默认大小	应用场景
标题1	.markdown-body h1	2em	一级标题
标题2	.markdown-body h2	1.5em	二级标题
正文	.markdown-body	16px	普通文本
代码块	pre, code	12px	代码片段
引用文本	.markdown-body blockquote	85%	引用内容
数学公式	.katex	1em	LaTeX公式渲染

2.2 字体族配置策略

项目采用"系统字体优先"的配置策略，确保跨平台兼容性：

/* 主要字体族配置 */
-- 默认无衬线字体栈（github-markdown.css）
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif;

-- 等宽字体（代码专用）
font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;

-- 图标字体（dx.light.compact.css）
font-family: DXIcons;

3. 自定义字体显示效果的三种方法

3.1 使用内置样式覆盖（推荐）

通过修改github-markdown.css中的.markdown-body类自定义全局字体：

/* 自定义全局字体示例 */
.markdown-body {
    /* 优先使用微软雅黑， fallback到系统默认 */
    font-family: "Microsoft YaHei",-apple-system,BlinkMacSystemFont,sans-serif;
    /* 放大默认字体 */
    font-size: 17px;
    /* 增加行高提升可读性 */
    line-height: 1.6;
}

3.2 针对特定元素的精细调整

如需单独调整某类元素字体，可添加针对性样式：

/* 调整代码块字体 */
.markdown-body pre, 
.markdown-body code {
    font-family: "Fira Code",Consolas,monospace;
    font-size: 14px; /* 放大代码字体 */
}

/* 调整引用样式 */
.markdown-body blockquote {
    font-family: "Georgia",serif; /* 使用衬线字体区分引用 */
    font-style: italic;
}

3.3 公式字体特殊配置

数学公式字体由KaTeX引擎控制，配置位于katex.min.css：

/* 公式字体配置 */
@font-face {
    font-family: KaTeX_AMS;
    src: url(fonts/KaTeX_AMS-Regular.woff2) format("woff2");
}
/* 其他公式字体族... */

如需修改公式字体大小，可调整根选择器：

.katex {
    font-size: 1.1em !important; /* 放大公式10% */
}

4. 常见字体问题解决方案

4.1 中文字体显示异常

问题：部分系统中中文显示为方块或默认衬线字体
解决：在字体栈前端添加中文字体名称

.markdown-body {
    font-family: "Microsoft YaHei","Heiti SC",-apple-system,BlinkMacSystemFont,sans-serif;
}

4.2 代码字体对齐问题

问题：等宽字体宽度不一致导致表格对齐错乱
解决：指定固定等宽字体

.markdown-body pre,
.markdown-body code {
    font-family: "Courier New",monospace; /* 确保字符等宽 */
}

4.3 高DPI屏幕字体模糊

问题：高分屏显示字体边缘模糊
解决：添加字体平滑属性

.markdown-body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

5. 高级配置：创建自定义样式表

对于进阶用户，建议创建独立的自定义样式文件（如custom-font.css），通过以下步骤应用：

1. 在addon/chrome/content/styles/目录创建自定义CSS文件
2. 添加字体配置（示例）：

/* custom-font.css */
:root {
    --custom-font: "PingFang SC", "Helvetica Neue", sans-serif;
    --code-font: "Source Code Pro", monospace;
}

.markdown-body {
    font-family: var(--custom-font);
    font-size: 16px;
}

code, pre {
    font-family: var(--code-font);
}

3. 在workspaceWindow.xhtml中引入自定义样式：

<link rel="stylesheet" href="styles/custom-font.css" />

6. 字体配置对比参考

配置方案	优势	适用场景
默认系统字体	性能最佳，无兼容性问题	日常笔记
微软雅黑/思源黑体	改善中文显示效果	中文文献笔记
等宽字体（如Fira Code）	代码与表格对齐更精准	技术类笔记
衬线字体（如Georgia）	长文本阅读更舒适	文学类笔记

通过合理配置字体属性，可显著提升Zotero笔记的阅读体验和专业度。建议根据笔记类型（学术/技术/文学）选择不同字体方案，并始终保留CSS备份以便恢复默认设置。

【免费下载链接】zotero-better-notes Everything about note management. All in Zotero. 项目地址: https://gitcode.com/gh_mirrors/zo/zotero-better-notes