字体系列：Garamond，无衬线；不会总是产生无衬线字体，为什么？答案

【问题标题】：font-family: Garamond, sans-serif; won't always produce sans serif font face, why?字体系列：Garamond，无衬线；不会总是产生无衬线字体，为什么？
【发布时间】：2021-12-18 17:21:11
【问题描述】：

我有一个网站，我将全局字体设置为font-family: Garamond, sans-serif;。我在网上读到 Garamond 是“网络安全字体”。我现在对此表示怀疑，因为在某些操作系统上，这个 Garamond 不会在没有衬线的情况下呈现。

我们最终调查并得出结论，例如在某些 Windows 发行版中，默认的 Garamond 字体仅包含衬线。所以我的网站最终在不同的操作系统上看起来完全不同。以下示例：

现在，当 Garamond 在操作系统上可用作无衬线字体时，我只想使用它，否则我想使用另一种无衬线字体。我从不想渲染基于衬线的字体。如果不包括第三方字体，这可能吗？其他人是否知道这个“错误”或“混乱”。这里有什么关系？

<!doctype html>
<html>
  <head>
    <style>html,body { font-family: Garamond, sans-serif }</style>
    <meta charset="utf-8"/>
    <title></title>
  </head>
  <body>bla
  </body>
</html>

【问题讨论】：

请提供代码
github.com/rugpullindex/design-system/blob/…
请隔离导致问题的代码，并将其添加到问题中的最小且可重现的示例 sn-p 中。
Garamond is a group of many serif typefaces

标签： css fonts webfonts

【解决方案1】：

正如 Alochi 所说，Garamond 是衬线字体。您的第二张照片是 Garamond 应该的样子。您的第一张照片的计算机没有安装 Garamond，因此它使用了“sans-serif”（在本例中为 Arial）。

Garamond 不随任何 Windows 版本一起分发。它包含在 Microsoft Office 中，这就是为什么许多 Windows PC 都有它。

任何具有 Garamond 的计算机、任何操作系统都会为您提供衬线字体，因此如果您不想要衬线字体，则不能调用 Garamond。

【讨论】：

【解决方案2】：

一种快速的解决方法是使用@import 或@font-face 简单地导入Garamond 的无衬线版本并重新定义“自定义”Garamond 无衬线字体，即GaramondSansSerif 字体系列并使用它？然后你强制所有用户获取正确的版本。应该可以的。

@font-face {
  font-family: 'GaramondSansSerif';
  src:  url('/path/to/fonts/GaramondSansSerif.woff2') format('woff2'),
        url('/path/to/fonts/GaramondSansSerif.woff') format('woff'),
        url('/path/to/fonts/GaramondSansSerif.ttf') format('truetype');
}

然后

font-family:'GaramondSansSerif';

【讨论】：