简单整合 CSS 设置字体方法及分享字体配置

每日闲聊
1

为什么要换掉默认字体

Ob 的默认字体存在数字圈字号异常 [^1]、日语大小假名字号相近难以辨认等问题，影响正常使用。此外，在区分英文大写字母 I 与小写字母 l、前后引号显示等方面，也存在优化空间。

[^1]: 在 Obsidian 中使用①②的时候显示得特别大

使用 CSS 设置字体

个人经验：

  1. 建议使用 ttf 进行转换，成功率大于 otf。
  2. 若字体文件为 ttc，使用 Transfonter - Unpack TTC 分出单一 ttf 文件。
  3. 若 ttf 文件大于 15MB，先使用 Baidu EFE - FontEditor ttf 转 woff2。
  4. Transfonter - Webfont generator ttf/woff2 转 CSS。

    1. 若后续设置完后发现字形有误则不启用 Family support

    2. 启用 Base64 encode

    3. Formats 取消勾选 WOFF，即只勾选 WOFF2

    4. Demo page language：Without demo page

    5. Font display：auto

    6. 网站有保存选项，配置完后可以保存，下次就不用重新设置了

      image

    7. 点击 Convert 等待下载压缩包

  5. 解压得 stylesheet.css，复制 @font-face 到自己的 CSS 进行设置即可。
    为免冲突，已用 CSS 设置，则勿在 Ob 设置 - 外观 - 字体中添加字体。

用 Custom Font Loader 插件设置应该也是可以的。只需注意该插件的一些小问题，见 英数字字形不显示为所设字体

参考：
Obsidian 的字体设置
移动端自定义字体简要说明
如何分别设置中英文字体

字体选择根据个人喜好不同，没有特别多的参考空间，姑且分享下自己配置好的文件：

蓝奏云下载链接 密码: 7mcr，选择“font-family”。
如果不知道什么是添加 CSS，参 CSS 分享：自动隐藏式十字花左侧边栏

字体来源：

  • 正文标点符号及空格：煮豆黑体 Zhudou Sans，GitHub
    使用字体特性：半角宽度引号 hwid、居中标点 cpct、蝌蚪或豆芽形引号 ss02、
    破折号连字（字体默认开启）、标点挤压（字体默认开启）。
  • 英数字：IBM Plex Sans Condensed，GitHub
    大写字母 I 为衬线，其余基本为非衬线。
    在 Releases 列表找 plex-sans-condensed。
  • 其他字符：思源黑体简中 Source Han Sans CN，GitHub

其他：

  • 分享一个可以上传字体文件查看字体特性、支持语言等信息的网站：what can my font do
  • 如果没有其他需求，统一使用等宽字体也是不错的选择。个人因觉得日常行文中等宽字体的空格宽度过宽，并且希望能够使用煮豆黑体的标点居中特性，所以没有选择。

更新：好像在官方样式设置下等宽字体也存在样式问题。这里有一个修改可供参考：

2 个赞