Mac 字体

很久之前,写过一篇关于 【计算机字符编码与内存编码 - Unicode】 的快照,根据 码位、码表 对字符进行了介绍。这里特别说明一下 Mac 系统上的字体库。

系统自带软件:Font book
字体文件夹: /System/Library/Fonts 、/Library/Fonts、~/Library/Fonts
苹果提供的字体:Applexxx 、Apple xxx 、SFxxx 、PingFangxxx

如何使用字体

  1. 操作系统根据语言的不同,会使用默认字体。比如中文系统,会使用 PingFang 字体。英文系统,会使用 SF 字体。
  2. app、dmg 等软件,可以直接使用 defaultfont:xxx 的形式直接使用系统字体,或者使用 fontname:xxx 的形式自行选择字体。自行选择的时候,可以使用系统提供的字体,也可以将 xx 字体打入 app 中来使用。
  3. app 提供修改字体的功能,用户可以自行选择需要的字体。

图标

Apple 平台提供了两个图标字体,分别是:Apple Color Emoji 和Apple Symbols 。

字体库能够包含图标、颜色,在之前阐述 Unicode 的时候已经说明过,因为它们都依靠码位 进行检索。所以在不同的平台上,都会有自己的图标库的系统级别实现,显示效果会不一样。

字体回退

每个字体可以适配多种语言,但没有一个字体是全能的。即【一定需要字体回退】来对当前字体无法渲染的文字进行兜底。
在 mac font app 中,打开一个 font,会列出其 support 的文字集合。

  1. 部分 app 支持设置 1 个字体:回退到系统字体。
  2. 部分 app 支持设置 n 个字体,按照优先级进行回退,最后回退到系统字体。如 browser 等
  3. css:通过设置 font-family 属性来实现字体回退。例如:font-family: "MyFont", "FallbackFont", sans-serif;

Nerd Font

nerd font 是一个项目集合,它将非常多的字体进行扩展,增加了许多 icon,从而让已经非常优秀的字体扩展了更多的功能。

可以通过 brew 安装 nerd 字体。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
> brew search nerd-font

font-0xproto-nerd-font font-iosevka-nerd-font
font-3270-nerd-font font-iosevka-term-nerd-font
font-agave-nerd-font font-iosevka-term-slab-nerd-font
font-anonymice-nerd-font font-jetbrains-mono-nerd-font ✔
font-arimo-nerd-font font-lekton-nerd-font
font-aurulent-sans-mono-nerd-font font-liberation-nerd-font
font-bigblue-terminal-nerd-font font-lilex-nerd-font
font-bitstream-vera-sans-mono-nerd-font font-m+-nerd-font
font-blex-mono-nerd-font font-martian-mono-nerd-font
font-caskaydia-cove-nerd-font font-meslo-lg-nerd-font
font-caskaydia-mono-nerd-font font-monaspace-nerd-font
font-code-new-roman-nerd-font font-monocraft-nerd-font
font-comic-shanns-mono-nerd-font font-monofur-nerd-font
font-commit-mono-nerd-font font-monoid-nerd-font
font-cousine-nerd-font font-mononoki-nerd-font
font-d2coding-nerd-font font-noto-nerd-font
font-daddy-time-mono-nerd-font font-open-dyslexic-nerd-font
font-dejavu-sans-mono-nerd-font font-overpass-nerd-font
font-droid-sans-mono-nerd-font ✔ font-profont-nerd-font
font-envy-code-r-nerd-font font-proggy-clean-tt-nerd-font
font-fantasque-sans-mono-nerd-font font-recursive-mono-nerd-font
font-fira-code-nerd-font ✔ font-roboto-mono-nerd-font
font-fira-mono-nerd-font font-sauce-code-pro-nerd-font
font-geist-mono-nerd-font font-shure-tech-mono-nerd-font
font-go-mono-nerd-font font-space-mono-nerd-font
font-gohufont-nerd-font font-symbols-only-nerd-font
font-hack-nerd-font ✔ font-terminess-ttf-nerd-font
font-hasklug-nerd-font font-tinos-nerd-font
font-heavy-data-nerd-font font-ubuntu-mono-nerd-font
font-hurmit-nerd-font font-ubuntu-nerd-font
font-im-writing-nerd-font font-ubuntu-sans-nerd-font
font-inconsolata-go-nerd-font font-victor-mono-nerd-font
font-inconsolata-lgc-nerd-font font-zed-mono-nerd-font
font-inconsolata-nerd-font netron ✔
font-intone-mono-nerd-font

通过 brew install --cask font-hack-nerd-font 安装的字体,会被安装到 ~/Library/Fonts 文件夹中。

等宽字体

有 Fira Code、hack 等,在英文场景非常舒服,IDE 场景经常使用。

zsh

zsh 有 powerlevel10k 主题。该主题在字体方面比较丰富,主要是采用了很多字体 icon。有些字体如果提供不了 所需 的 icon,显示就会异常。

但是 powerlevel10k 本身仅仅是配置文件,它不提供字体的安装。所以用户需要自行安装所需要的字体。它和 nerd font 配合比较友好,只要是 nerd font 项目中的字体,都可以被 powerlevel10k 很好的使用。

操作流程:

  1. 通过 brew 安装 nerd 项目中的字体,如 hack。
  2. ITerm、Warp 中选择 nerd 字体。

浏览器切换字体

安装 hack 等字体后,很多天天见面的 IDE 或者 app,就可以切换喜欢的字体了。
其中,浏览器可以设置全局的字体切换,这对爱好某一个字体的同学来说,将非常友好。
全局 css 内容推荐如下,后面配置的时候会用到:

1
2
3
4
5
6
7
span:not(.material-symbols-outlined, .material-icons, .google-material-icons, .fa, .fas, .far, .fal, .fab, .fad, [class*="icon"], svg, [class*="DP"], [class*="hd"]),
i:not(.material-symbols-outlined, .material-icons, .google-material-icons, .fa, .fas, .far, .fal, .fab, .fad, [class*="icon"], svg, [class*="DP"], [class*="hd"]),
body, li, p, div, h1, h2, h3, h4, h5, h6, a, ul, ol, dl, dt, dd, button, input, textarea, select, option, optgroup, label, pre, code, kbd, samp, var, table, th, td, tr, thead, tbody, tfoot, caption, blockquote, cite, q, strong, em, b, small, sub, sup, mark, del, ins, abbr, acronym, address, time, form, fieldset, legend, nav, header, footer, section, article, aside, main, details,
summary {
font-family: "FiraCode Nerd Font Mono", sans-serif !important;
-webkit-font-smoothing: antialiased !important;
}

Tips:最好不要使用 body, * {} 以及 !important,这样会影响到一些网站的显示效果。因为有些字体是图标字体,会紊乱变形。

safari

safari 浏览器提供了全局样式表:【setting - advanced - style sheet】,这里可以在选择本地一个 xx.css 文件,来设置全局的样式。
文件内容就是上面提供的示例 css。

chrome 家族

chrome、arc 等,都可以通过插件 Stylus 来设置全局样式表,这个插件非常棒,可以定制很多网站的样式,有很多网友制作的样式,可以直接使用。
这里,我们可以通过该插件设定一个全局样式表,内容就是上面提供的示例 css。