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

Question

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

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

现在，当 Garamond 在 OS 上作为无衬线字体可用时，我只想使用它，否则我想退回到另一种无衬线字体。我从不想渲染基于衬线的字体。如果不包含第三方字体，这可能吗？其他人是否知道这个“错误”或“混乱”。这是怎么回事？

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

Answer 1

一个快速的解决方法是简单地使用@import 或@font-face 导入无衬线版本的 Garamond 并重新定义 'custom' Garamond sans-serif 即 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';

Answer 2

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

Garamond 未随任何 Windows 版本分发。它包含在 Microsoft Office 中，这就是为什么许多 Windows 个人电脑都安装它的原因。

任何装有 Garamond 的 OS 计算机都会为您提供衬线字体，因此如果您不想要衬线，则不得调用 Garamond。

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

font-family: Garamond, sans-serif; won't always produce sans serif font face, why?

css

fonts

webfonts