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

为什么要换掉默认字体

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
  • 如果没有其他需求,统一使用等宽字体也是不错的选择。个人因觉得日常行文中等宽字体的空格宽度过宽,并且希望能够使用煮豆黑体的标点居中特性,所以没有选择。

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

3 个赞