在使用 RemNote 时，中文字体显示不是很好看，我希望实现中文和英文使用不同字体的效果。例如，中文采用常用「霞鹜文楷 Mono」字体，而英文字符使用系统默认字体，以提高阅读体验和视觉效果。RemNote官方文档提到此类需求只能够通过CSS来实现，本文即详细介绍如何通过自定义 CSS 实现这一目标。

一、问题背景

RemNote 默认不支持直接修改字体，我们只能通过官方提供的 Custom CSS 功能修改界面样式。默认情况下，当我们指定一个字体时，所有字符（包括中文、英文和数字）都会统一使用该字体，可能会出现英文显示效果不佳的情况。

我们的目标是：

  1. 普通正文的中文使用「霞鹜文楷 Mono」字体。
  2. 普通正文的英文字符自动使用系统默认字体（如 Inter、Segoe UI、苹果系统字体等）。
  3. 所有标题级别 (Heading 1/2/3) 和加粗文本依然继续使用系统默认字体，且有明确的字重区分。

二、Custom CSS

承接上文，如果要修改默认字体，必须通过Custom CSS功能，也就是用户自定义一个CSS来实现对RemNote默认的字体的显示。直接在RemNote界面的左下角，搜索 CSS 即可看到 Edit Custom CSS 菜单，点击进入编辑界面。

RemNote左下角（不是左上角）搜索CSS字样，进入 Edit Custom CSS编辑功能

点击后，右侧会简要解释一下Custom CSS的用法。

大体意思是说：

  1. 自定义外观：​通过在“Custom CSS”功能页中添加 CSS 代码块，用户可以修改 RemNote 的界面样式，如字体、颜色、布局等。​
  2. 代码块应用范围：​在“Custom CSS”页中，所有设置为 CSS 语言的代码块，其样式将自动应用于整个知识库。​
  3. 便捷添加代码块：​点击“Add Blank CSS Block”按钮，可以快速创建新的 CSS 代码块，方便用户进行样式定制。
  4. 临时禁用特定样式：​如果某个 CSS 代码块的父 Rem 被标记为“finished”状态（即待办事项被勾选），该代码块的样式将被暂时禁用。

其实点击一次 “Add Blank CSS Block” 就是添加一个CSS样式（会在下方自动新建一个空的Rem），它们是以 TODO 列表形式呈现的，默认为开启，如果你勾选成为 Done 状态，那就是禁用 了这个 CSS 样式。

上面的【中英文字体】为开启状态，下面的Google Fonts为禁用状态

三、解决方案

我们需要使用 CSS 中的 @font-face 和 unicode-range 描述符来实现对中文和英文字符的自动区分和回退。

我们的目标是只对普通正文级别的中文应用专用字体，其他维持系统默认。

第一步：声明仅针对中文字符的字体

使用霞鹜文楷 Mono 字体，并限定了字体只对中文 Unicode 范围内的字符生效。

@font-face {
  font-family: 'WenKaiCN';
  src: url('https://raw.githubusercontent.com/lxgw/LxgwWenKai/main/fonts/TTF/LXGWWenKaiMono-Regular.ttf') format('truetype');
  unicode-range:
    U+4E00-9FFF,
    U+3400-4DBF,
    U+20000-2A6DF,
    U+3000-303F,
    U+FF00-FFEF;
}

第二步：设置全局正文字体，自动区分中英文

.rem-text {
  font-family:
    'WenKaiCN',
    "Inter",
    -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif !important;
}

这里的字体顺序非常关键：

浏览器遇到汉字时使用 WenKaiCN（即霞鹜文楷 Mono）。

遇到英文或数字时，由于不在 unicode-range 中自动跳过，选择下一个字体 (Inter 或系统默认)。

第三步：标题字体的恢复

标题（Heading 1、2、3）不适合用 Mono 字体，我们明确将其恢复到 RemNote 默认字体并设定半粗 (600) 字重。

.rem-text.rem-header--1,
.rem-text.rem-header--2,
.rem-text.rem-header--3 {
  font-family:
    "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif !important;
  font-weight: 600 !important;
}

第四步：加粗文本字体恢复

对加粗文本，我们也恢复默认字体并强制设定为 bold (700) 字重。

.rem-text span.bold {
  font-family:
    "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif !important;
  font-weight: 700 !important;
}

四、实施效果

使用以上完整 CSS 代码后，在 RemNote 中实现了以下效果：

  1. 普通段落的中文字符使用优雅的「霞鹜文楷 Mono」。
  2. 英文和数字自然地回落到系统字体，清晰易读。
  3. 所有标题和加粗文本，明确地与正文区分，使用系统字体，视觉上清晰且层次分明。
RemNote 中的实现效果

五、总结与建议

本方案利用 CSS 的高级特性巧妙实现了字体的自动区分与回退，解决了视觉效果上的问题，主要目的是提升日常笔记的阅读舒适度。

若有其他字体需求，依然可参考本方案灵活修改 Unicode 范围和字体堆栈。希望本文能帮助大家更愉快地使用 RemNote！

最后附上完整代码：

/* ──────────────────────────────────────────────
   1. 自定义只对汉字生效的文楷 Mono @font-face
   ────────────────────────────────────────────── */
@font-face {
  font-family: 'WenKaiCN';
  /* 这里用的是官方 GitHub 原始 TTF 链接，也可以换成你自己托管的 */
  src: url('https://raw.githubusercontent.com/lxgw/LxgwWenKai/main/fonts/TTF/LXGWWenKaiMono-Regular.ttf') format('truetype');
  /* 仅覆盖常用汉字、扩展 A/B/C/D、全角标点等 */
  unicode-range:
    U+4E00-9FFF,
    U+3400-4DBF,
    U+20000-2A6DF,
    U+3000-303F,
    U+FF00-FFEF;
}

/* ──────────────────────────────────────────────
   2. 正文：汉字用上面那套“WenKaiCN”，其余（英文字母、数字、半角标点）回落到默认
   ────────────────────────────────────────────── */
.rem-text {
  font-family:
    'WenKaiCN',
    "Inter",
    -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif !important;
}

/* ──────────────────────────────────────────────
   3. Heading 1/2/3：彻底恢复官方默认系统字体（半粗 600）
   ────────────────────────────────────────────── */
.rem-text.rem-header--1,
.rem-text.rem-header--2,
.rem-text.rem-header--3 {
  font-family:
    "Inter",
    -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif !important;
  font-weight: 600 !important;
}

/* ──────────────────────────────────────────────
   4. 加粗文本 (<span class="bold">)：恢复系统字体并强制粗体（700）
   ────────────────────────────────────────────── */
.rem-text span.bold {
  font-family:
    "Inter",
    -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif !important;
  font-weight: 700 !important;
}
4
2