SVG 中的系统字体 | CSS-Tricks

曾经，选择网站字体的明智之举是选择在尽可能多的平台上都支持的字体系列。例如 font-family: Tahoma; 等等。或者更好的是，一个会回退到尽可能相似的字体的字体堆栈，例如 font-family: Tahoma, Verdana, Segoe, sans-serif;。

如今，惊人的数量的网站使用自定义字体。 60%！

毫无疑问，自定义字体也遭到了相当程度的抵制。它们需要下载，因此会影响性能和带宽。针对如何加载它们有很多微妙之处。

同样毫无疑问，也有一些人提倡回归本地字体。速度快！足够好！我们先看看这个，然后再看看在 SVG 中使用它们。

这种趋势不仅仅是回归本地字体，而是回归被称为“系统字体”的东西。 重点不是一个在浏览器/平台/版本之间看起来一致的单个字体堆栈，而是一个与该操作系统使用的字体匹配的单个字体堆栈。

如果操作系统在 UI 中使用“San Francisco”，则字体堆栈应显示 San Francisco。如果操作系统使用 Roboto，就应该使用 Roboto。执行此操作的实际字体堆栈相当厚。但这就是重点，只需按照您要使用的顺序列出一些字体，CSS 会一直向下遍历堆栈，直到找到一个它拥有的字体。

以下是 GitHub 使用的

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

WordPress 管理员和 Medium 界面目前使用这个

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

这篇文章的标题是关于在 SVG 中使用这些字体堆栈。这没什么特别或不同或特别有趣之处。您可以在 SVG 内通过 CSS 应用该字体堆栈，或者直接将其放在文本元素上

<text font-family='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"' font-size="18" font-weight="400" fill="black" x="50" y="50">
  Some Text
</text>

在 SVG 中设置文本非常棒，因为它保留了可访问性并且非常灵活。

再说一次，这一切的重点是匹配操作系统使用的字体，所以让我们看看。 OS X 特别有趣，因为系统字体在过去几年中改变了好几次。

OS 10.0 – 10.9 – Lucida Grande
OS 10.10 – 10.11 – Helvetica Neue
OS 10.12 – San Francisco

Chrome DevTools 不仅会显示您检查元素时的字体堆栈，还会显示 渲染后的字体。