Obsidian 学习笔记

Appearance

自定义字体与中文排版 ​

Obsidian 默认使用系统字体，中文排版效果参差不齐。通过 CSS 片段可以自定义编辑器、预览和界面字体，大幅提升阅读和写作体验。

推荐字体 ​

中文字体 ​

字体类型适用场景特点
霞鹜文楷 (LXGW WenKai)开源手写体预览阅读温暖、适合长文
思源黑体 (Noto Sans SC)无衬线界面、编辑器清晰、现代
思源宋体 (Noto Serif SC)衬线预览阅读正式、学术风
苹方 (PingFang SC)系统字体macOS 界面苹果生态原生

等宽字体 ​

字体适用场景特点
JetBrains Mono代码编辑连字支持
Fira Code代码编辑连字丰富
Cascadia Code终端/代码微软风格

完整片段 ​

css
/* ==================== 字体设置 ==================== */

/* 编辑器字体 - 适合编程和写作 */
.cm-s-obsidian .cm-line,
.markdown-source-view {
  font-family: 'JetBrains Mono', 'PingFang SC', 'Noto Sans SC', monospace;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

/* 预览模式字体 - 适合阅读 */
.markdown-preview-view {
  font-family: 'LXGW WenKai', 'Noto Serif SC', serif;
  font-size: 16px;
  line-height: 1.8;
}

/* 界面字体 */
body {
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 标题字体 - 加粗 */
.cm-header,
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3 {
  font-family: 'Inter', 'PingFang SC', sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* 代码字体 */
code, pre {
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
}

自定义参数 ​

调整字号 ​

css
/* 全局字号 */
.markdown-source-view { font-size: 15px; }
.markdown-preview-view { font-size: 16px; }

/* 标题字号 */
.markdown-preview-view h1 { font-size: 1.8em; }
.markdown-preview-view h2 { font-size: 1.4em; }
.markdown-preview-view h3 { font-size: 1.2em; }

调整行高 ​

css
/* 紧凑（适合代码） */
.cm-line { line-height: 1.5; }

/* 标准（适合日常） */
.markdown-preview-view p { line-height: 1.7; }

* 宽松（适合长文阅读） */
.markdown-preview-view p { line-height: 2.0; }

字间距 ​

css
/* 西文字间距 */
.markdown-preview-view p { letter-spacing: 0.02em; }

/* 中文段间距 */
.markdown-preview-view p { margin-bottom: 1em; }

字体安装方法 ​

方式一：系统安装 ​

将字体文件安装到系统后，直接在 CSS 中使用字体名。

方式二：Obsidian 内嵌 ​

将 .woff2 字体文件放入 .obsidian/snippets/fonts/，在 CSS 中引用：

css
@font-face {
  font-family: 'LXGW WenKai';
  src: url('fonts/LXGW WenKai.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

.markdown-preview-view {
  font-family: 'LXGW WenKai', serif;
}

方式三：网络字体 ​

css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;600&display=swap');

body {
  font-family: 'Noto Sans SC', sans-serif;
}

注意

网络字体需要联网加载，首次使用可能有延迟。建议下载到本地使用。

常见问题 ​

字体不生效？ ​

  1. 检查字体名拼写是否正确（区分大小写）
  2. 确认字体已安装到系统或放入 snippets 目录
  3. 重启 Obsidian 或刷新 CSS 片段

中英文混排间距太大？ ​

css
/* 优化中英文混排间距 */
.markdown-preview-view p {
  letter-spacing: normal;
  word-spacing: 0.05em;
}

相关内容 ​