Obsidian 字体配置
4 min read

Obsidian 字体配置

Obsidian 在 macOS、iOS、iPadOS 设备中字体配置的方法。
Obsidian 字体配置
Photo by Markus Spiske / Unsplash

Obsidian 自定义重要的一项就是字体配置,我使用的主要是 Apple 的设备,所以打算总结一下在 macOS、iOS、iPadOS 下面的字体配置。

字体准备

这里是指抛开系统自带的字体以外的字体准备,我以一款我很喜欢的中文字体LXGW WenKai举例(我们在 GithubGoogle Fonts 等地方找到免费使用的字体)。

获取字体文件

在字体资源的网站获取 ttf 格式的文件,如下图所示。

安装字体

字体安装的时候取决于 Apple 设备,主要分为两种情况:

1、macOS 安装字体

简单双击 ttf 文件,macOS 自带的字体册应用会引导完成字体的安装。

2、移动设备安装字体

Apple 的移动设备封闭性比较高,需要借助第三方应用进行字体安装,我借助的是 iFont 应用来进行安装自定义字体的,iFont 大致的实现原理就是通过配置描述文件来完成字体安装,所以安装完成之后你会在通用 -> VPN与设备管理 -> 配置描述文件看到自己安装的字体,如下图所示。

Obsidian 自定义字体

Obsidian 自定义字体跟你选择的主题有关系,总结下来有两种情况:

  1. theme 自带字体配置接口;
  2. css snippet 自定义字体配置

theme 自带字体配置接口

这个跟主题的开发者设计有关系的,以 Minimal Theme 举例:

在 macOS 字体手册中查看字体名,如下图所示

Obsidian 配置中在 Minimal Theme Settings 中进行字体配置,如下图所示

css snippet 自定义字体配置

1、系统已安装字体

通过 css snippet 根据安装的主题进行字体配置,关于 Obsidian css snippet 介绍可以参考这几篇:

  1. Obsidian 配置 css snippet:How to customise your own Obsidian theme with CSS in 3 steps
  2. 找到页面元素的 css selector:Getting comfortable with Obsidian CSS

最后贴上一个我针对 Things 主题和 Dark Moss 主题的字体配置 css 代码片段:

:root {
  /* for Dark Moss */
  --font-family-editor: "Comic Mono";
  --font-family-preview: "Comic Mono";

  /* for Things */
  --text: "LXGW WenKai Mono", "Comic Mono", Verdana, Arial, Helvetica,
    sans-serif !important;
  --text-editor: "LXGW WenKai Mono", "Comic Mono", Verdana, Arial, Helvetica,
    sans-serif !important;
  --font-monospace: "LXGW WenKai Mono", "Comic Mono", Verdana, Arial, Helvetica,
    sans-serif !important;
  --font-ui: "Comic Mono", Verdana, Arial, Helvetica, sans-serif !important;
  --font-normal: 18px !important;
  --font-small: 16px;
  --font-smaller: 15px;
  --font-smallest: 14px;
  --h1: 1.1em;
  --h2: 1.08em;
  --h3: 1.06em;
  --h4: 1.05em;
  --h5: 1.04em;
  --h6: 1.02em;
}

/* fix Things header4 useing uppercase */
.markdown-preview-view h4,
.HyperMD-header-4,
.cm-s-obsidian .cm-header-4 {
  letter-spacing: 0.02em;
  font-size: var(--h4);
  color: var(--h4-color);
  font-weight: var(--h4-weight) !important;
  text-transform: none;
}

/* Better word and character spacing */
body {
  word-spacing: -0.04rem;
  letter-spacing: 0.01rem;
}
/* makes type a lot sharper and clear on hires screens
 * NOTE: disable font-smoothing setting for LXGW WenKai Mono fonts
 */
/*
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
*/
/* button font-family setting */
button {
  font-family: var(--font-ui) !important;
}

2、系统未安装字体

该方式主要是利用了font-face 支持 base64 编码数据的 URI,具体的格式如下所示:(⚠️这种方式因为涉及到 base64 解码加载等缘故会降低页面加载的速度)

@font-face{
    font-family: test;
    src: url(data:font/opentype; base64, [base64 string here]);
}

根据上述格式规范我们需要将 ttf 字体文件转换成 base64 编码,有一个现成的 Online @font-face generator — Transfonter 上传 ttf 文件之后会生成 base64 编码数据,最终形成如下图的是 font-face css:(

@font-face {
  font-family: "remixicon";
  src: url("data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAcQcAA4AAAAFqyAAAcO9AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GVgCmAAgEEQgK...too many hex to ignore")
      format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

References

  1. 一款基于 FONTWORKS 出品字体 Klee One 改造的开源中文字体
  2. Obsidian dark theme
  3. An Obsidian theme inspired by the beautifully-designed app, Things.
  4. Getting comfortable with Obsidian CSS
  5. Obsidian美化|CSS Snippets资源整理
  6. Base64 encoded OpenType font-face using data URI - Stack Overflow
  7. Online @font-face generator — Transfonter

Public discussion

足迹