<blockquote><p>很久之前,写过一篇关于 【<a href="https://www.yigegongjiang.com/2023/unicode/"><strong>计算机字符编码与内存编码 - Unicode</strong></a>】 的快照,根据 码位、码表 对字符进行了介绍。这里特别说明一下 Mac 系统上的字体库。</p></blockquote><p>系统自带软件:<code>Font book</code><br>字体文件夹: <code>/System/Library/Fonts</code> 、<code>/Library/Fonts</code>、<code>~/Library/Fonts</code><br>苹果提供的字体:<code>Applexxx</code> 、<code>Apple xxx</code> 、<code>SFxxx</code> 、<code>PingFangxxx</code></p><h1 id="如何使用字体"><a href="#如何使用字体" class="headerlink" title="如何使用字体"></a>如何使用字体</h1><ol><li>操作系统根据语言的不同,会使用默认字体。比如中文系统,会使用 <code>PingFang</code> 字体。英文系统,会使用 <code>SF</code> 字体。</li><li>app、dmg 等软件,可以直接使用 <code>defaultfont:xxx</code> 的形式直接使用系统字体,或者使用 <code>fontname:xxx</code> 的形式自行选择字体。自行选择的时候,可以使用系统提供的字体,也可以将 xx 字体打入 app 中来使用。</li><li>app 提供修改字体的功能,用户可以自行选择需要的字体。</li></ol><span id="more"></span><h1 id="图标"><a href="#图标" class="headerlink" title="图标"></a>图标</h1><p>Apple 平台提供了两个图标字体,分别是:<code>Apple Color Emoji</code> 和<code>Apple Symbols</code> 。</p><p>字体库能够包含图标、颜色,在之前阐述 Unicode 的时候已经说明过,因为它们都依靠<code>码位</code> 进行检索。所以在不同的平台上,都会有自己的图标库的系统级别实现,显示效果会不一样。</p><h1 id="字体回退"><a href="#字体回退" class="headerlink" title="字体回退"></a>字体回退</h1><p>每个字体可以适配多种语言,但没有一个字体是全能的。即【一定需要<strong>字体回退</strong>】来对当前字体无法渲染的文字进行兜底。<br>在 mac font app 中,打开一个 font,会列出其 support 的文字集合。</p><ol><li>部分 app 支持设置 1 个字体:回退到系统字体。</li><li>部分 app 支持设置 n 个字体,按照优先级进行回退,最后回退到系统字体。如 browser 等</li><li>css:通过设置 <code>font-family</code> 属性来实现字体回退。例如:<code>font-family: "MyFont", "FallbackFont", sans-serif;</code></li></ol><h1 id="Nerd-Font"><a href="#Nerd-Font" class="headerlink" title="Nerd Font"></a>Nerd Font</h1><p>nerd font 是一个项目集合,它将非常多的字体进行扩展,增加了许多 icon,从而让已经非常优秀的字体扩展了更多的功能。</p><p>可以通过 brew 安装 nerd 字体。</p><figure class="highlight jsx"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">> brew search nerd-font</span><br><span class="line"></span><br><span class="line">font-0xproto-nerd-font font-iosevka-nerd-font</span><br><span class="line">font-<span class="number">3270</span>-nerd-font font-iosevka-term-nerd-font</span><br><span class="line">font-agave-nerd-font font-iosevka-term-slab-nerd-font</span><br><span class="line">font-anonymice-nerd-font font-jetbrains-mono-nerd-font ✔</span><br><span class="line">font-arimo-nerd-font font-lekton-nerd-font</span><br><span class="line">font-aurulent-sans-mono-nerd-font font-liberation-nerd-font</span><br><span class="line">font-bigblue-terminal-nerd-font font-lilex-nerd-font</span><br><span class="line">font-bitstream-vera-sans-mono-nerd-font font-m+-nerd-font</span><br><span class="line">font-blex-mono-nerd-font font-martian-mono-nerd-font</span><br><span class="line">font-caskaydia-cove-nerd-font font-meslo-lg-nerd-font</span><br><span class="line">font-caskaydia-mono-nerd-font font-monaspace-nerd-font</span><br><span class="line">font-code-<span class="keyword">new</span>-roman-nerd-font font-monocraft-nerd-font</span><br><span class="line">font-comic-shanns-mono-nerd-font font-monofur-nerd-font</span><br><span class="line">font-commit-mono-nerd-font font-monoid-nerd-font</span><br><span class="line">font-cousine-nerd-font font-mononoki-nerd-font</span><br><span class="line">font-d2coding-nerd-font font-noto-nerd-font</span><br><span class="line">font-daddy-time-mono-nerd-font font-open-dyslexic-nerd-font</span><br><span class="line">font-dejavu-sans-mono-nerd-font font-overpass-nerd-font</span><br><span class="line">font-droid-sans-mono-nerd-font ✔ font-profont-nerd-font</span><br><span class="line">font-envy-code-r-nerd-font font-proggy-clean-tt-nerd-font</span><br><span class="line">font-fantasque-sans-mono-nerd-font font-recursive-mono-nerd-font</span><br><span class="line">font-fira-code-nerd-font ✔ font-roboto-mono-nerd-font</span><br><span class="line">font-fira-mono-nerd-font font-sauce-code-pro-nerd-font</span><br><span class="line">font-geist-mono-nerd-font font-shure-tech-mono-nerd-font</span><br><span class="line">font-go-mono-nerd-font font-space-mono-nerd-font</span><br><span class="line">font-gohufont-nerd-font font-symbols-only-nerd-font</span><br><span class="line">font-hack-nerd-font ✔ font-terminess-ttf-nerd-font</span><br><span class="line">font-hasklug-nerd-font font-tinos-nerd-font</span><br><span class="line">font-heavy-data-nerd-font font-ubuntu-mono-nerd-font</span><br><span class="line">font-hurmit-nerd-font font-ubuntu-nerd-font</span><br><span class="line">font-im-writing-nerd-font font-ubuntu-sans-nerd-font</span><br><span class="line">font-inconsolata-go-nerd-font font-victor-mono-nerd-font</span><br><span class="line">font-inconsolata-lgc-nerd-font font-zed-mono-nerd-font</span><br><span class="line">font-inconsolata-nerd-font netron ✔</span><br><span class="line">font-intone-mono-nerd-font</span><br></pre></td></tr></tbody></table></figure><p>通过 <code>brew install --cask font-hack-nerd-font</code> 安装的字体,会被安装到 <code>~/Library/Fonts</code> 文件夹中。</p><h2 id="等宽字体"><a href="#等宽字体" class="headerlink" title="等宽字体"></a>等宽字体</h2><p>有 <code>Fira Code</code>、<code>hack</code> 等,在英文场景非常舒服,IDE 场景经常使用。</p><h1 id="zsh"><a href="#zsh" class="headerlink" title="zsh"></a>zsh</h1><p>zsh 有 <code>powerlevel10k</code> 主题。该主题在字体方面比较丰富,主要是采用了很多字体 icon。有些字体如果提供不了 所需 的 icon,显示就会异常。</p><p>但是 <code>powerlevel10k</code> 本身仅仅是配置文件,它不提供字体的安装。所以用户需要自行安装所需要的字体。它和 nerd font 配合比较友好,只要是 nerd font 项目中的字体,都可以被 <code>powerlevel10k</code> 很好的使用。</p><p>操作流程:</p><ol><li>通过 brew 安装 nerd 项目中的字体,如 hack。</li><li>ITerm、Warp 中选择 nerd 字体。</li></ol><h1 id="浏览器切换字体"><a href="#浏览器切换字体" class="headerlink" title="浏览器切换字体"></a>浏览器切换字体</h1><p>安装 hack 等字体后,很多天天见面的 IDE 或者 app,就可以切换喜欢的字体了。<br>其中,浏览器可以设置全局的字体切换,这对爱好某一个字体的同学来说,将非常友好。<br>全局 css 内容推荐如下,后面配置的时候会用到:</p><figure class="highlight css"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">span</span><span class="selector-pseudo">:not</span>(<span class="selector-class">.material-symbols-outlined</span>, <span class="selector-class">.material-icons</span>, <span class="selector-class">.google-material-icons</span>, <span class="selector-class">.fa</span>, <span class="selector-class">.fas</span>, <span class="selector-class">.far</span>, <span class="selector-class">.fal</span>, <span class="selector-class">.fab</span>, <span class="selector-class">.fad</span>, <span class="selector-attr">[class*=<span class="string">"icon"</span>]</span>, <span class="selector-tag">svg</span>, <span class="selector-attr">[class*=<span class="string">"DP"</span>]</span>, <span class="selector-attr">[class*=<span class="string">"hd"</span>]</span>),</span><br><span class="line"><span class="selector-tag">i</span><span class="selector-pseudo">:not</span>(<span class="selector-class">.material-symbols-outlined</span>, <span class="selector-class">.material-icons</span>, <span class="selector-class">.google-material-icons</span>, <span class="selector-class">.fa</span>, <span class="selector-class">.fas</span>, <span class="selector-class">.far</span>, <span class="selector-class">.fal</span>, <span class="selector-class">.fab</span>, <span class="selector-class">.fad</span>, <span class="selector-attr">[class*=<span class="string">"icon"</span>]</span>, <span class="selector-tag">svg</span>, <span class="selector-attr">[class*=<span class="string">"DP"</span>]</span>, <span class="selector-attr">[class*=<span class="string">"hd"</span>]</span>),</span><br><span class="line"><span class="selector-tag">body</span>, <span class="selector-tag">li</span>, <span class="selector-tag">p</span>, <span class="selector-tag">div</span>, <span class="selector-tag">h1</span>, <span class="selector-tag">h2</span>, <span class="selector-tag">h3</span>, <span class="selector-tag">h4</span>, <span class="selector-tag">h5</span>, <span class="selector-tag">h6</span>, <span class="selector-tag">a</span>, <span class="selector-tag">ul</span>, <span class="selector-tag">ol</span>, <span class="selector-tag">dl</span>, <span class="selector-tag">dt</span>, <span class="selector-tag">dd</span>, <span class="selector-tag">button</span>, <span class="selector-tag">input</span>, <span class="selector-tag">textarea</span>, <span class="selector-tag">select</span>, <span class="selector-tag">option</span>, <span class="selector-tag">optgroup</span>, <span class="selector-tag">label</span>, pre, <span class="selector-tag">code</span>, <span class="selector-tag">kbd</span>, <span class="selector-tag">samp</span>, <span class="selector-tag">var</span>, <span class="selector-tag">table</span>, <span class="selector-tag">th</span>, <span class="selector-tag">td</span>, <span class="selector-tag">tr</span>, <span class="selector-tag">thead</span>, <span class="selector-tag">tbody</span>, <span class="selector-tag">tfoot</span>, <span class="selector-tag">caption</span>, <span class="selector-tag">blockquote</span>, <span class="selector-tag">cite</span>, <span class="selector-tag">q</span>, <span class="selector-tag">strong</span>, <span class="selector-tag">em</span>, <span class="selector-tag">b</span>, small, sub, <span class="selector-tag">sup</span>, <span class="selector-tag">mark</span>, <span class="selector-tag">del</span>, <span class="selector-tag">ins</span>, <span class="selector-tag">abbr</span>, acronym, <span class="selector-tag">address</span>, <span class="selector-tag">time</span>, <span class="selector-tag">form</span>, <span class="selector-tag">fieldset</span>, <span class="selector-tag">legend</span>, <span class="selector-tag">nav</span>, <span class="selector-tag">header</span>, <span class="selector-tag">footer</span>, <span class="selector-tag">section</span>, <span class="selector-tag">article</span>, <span class="selector-tag">aside</span>, <span class="selector-tag">main</span>, <span class="selector-tag">details</span>,</span><br><span class="line"><span class="selector-tag">summary</span> {</span><br><span class="line"> <span class="attribute">font-family</span>: <span class="string">"FiraCode Nerd Font Mono"</span>, sans-serif <span class="meta">!important</span>;</span><br><span class="line"> -webkit-<span class="attribute">font-smoothing</span>: antialiased <span class="meta">!important</span>;</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure><blockquote><p>Tips:最好不要使用 <code>body, * {}</code> 以及 <code>!important</code>,这样会影响到一些网站的显示效果。因为有些字体是图标字体,会紊乱变形。</p></blockquote><h2 id="safari"><a href="#safari" class="headerlink" title="safari"></a>safari</h2><p>safari 浏览器提供了全局样式表:【setting - advanced - style sheet】,这里可以在选择本地一个 <strong>xx.css</strong> 文件,来设置全局的样式。<br>文件内容就是上面提供的示例 css。</p><h2 id="chrome-家族"><a href="#chrome-家族" class="headerlink" title="chrome 家族"></a>chrome 家族</h2><p>chrome、arc 等,都可以通过插件 <code>Stylus</code> 来设置全局样式表,这个插件非常棒,可以定制很多网站的样式,有很多网友制作的样式,可以直接使用。<br>这里,我们可以通过该插件设定一个全局样式表,内容就是上面提供的示例 css。</p><hr>