Sign in Subscribe
3 min read

RemNote 中文英文分离字体定制完整指南

在使用 RemNote 时，我们可能希望实现中文和英文使用不同字体的效果。例如，中文采用「霞鹜文楷 Mono」字体，而英文字符使用系统默认字体，以提高阅读体验和视觉效果。本文将详细介绍如何通过自定义 CSS 实现这一目标。

一、问题背景

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

我们的目标是：

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

二、解决方案

我们需要使用 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 中实现了以下效果：

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

四、总结与建议

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

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

Published by:

Benjamin