CSS：如何判断特定TTF字体的功能？

Question

我有一个任意的ttf字体，我想在我的Web应用程序中使用它。

我如何知道此字体可用哪些特性，例如“粗体”、“斜体”等？

背景：我希望避免尝试所有不同的设置，例如：

font-weight: bold;
font-style: italic;

为了查看哪一个对我的网站上字体的外观有影响。

- user2145488

---

如果您使用的是Windows系统，您可以通过右键单击并打开来查看字体集 - 通常情况下，每种字符类型都会有不同的TrueType字体文件。 - Pete

我非常确定ttf字体只有一个权重，添加font-weight:bold或其他类型的样式只是伪造效果。如果您想要真正的字体特性，您需要使用其中一种开放式字体格式，例如Google提供的格式。 - R Reveley

Answer 1

让我简单概括一下：这不是 ttf（或实际上任何）字体资源的工作方式。加粗、斜体等都是硬盘上单独的“物理”文件，Office 应用程序、文本编辑器等中看到的样式切换来自操作系统向您展示的一个抽象层：它只显示字体系列名称，而不是单个 ttf 或 otf 文件列表，然后显示样式/重量 UI 控件，触发从一个文件切换到另一个文件的实际字体资源切换，而您永远不会注意到。

因此，如果您只有一个 ttf 文件，则该文件仅表示一个特定的字体表达形式（常规、粗体、斜体、加粗斜体，甚至基于 OpenType 元数据属性的更详细的东西）。

更有趣的是：如果您想在 CSS 中使用字体，CSS 甚至不关心特定的字体资源是什么。它完全依赖于您告诉它它是什么，而且您可以撒谎：CSS 会相信您。如果您使用 @font-face 规则，则可以说要为特定的 font-* 属性组合使用哪个字体文件，因此您处于驾驶座位上：

@font-face {
  font-family: MyFont;
  /* CSS has no idea, nor does it care, what this font "really" is */
  src: url('myfont-Bold-Italic.ttf') format("truetype");
  /* so we tell it this font is applicable to weight:100, or ultra-thin */
  font-weight: 100;
  /* and we also tell it that this font is applicable in "normal" style */
  font-style: normal;
}

然后，就像您刚刚定义的页面样式一样，使用MyFont、正常风格和重量100，将加载您指定使用的任何ttf资源。CSS 引擎既不在意也不知道您告诉它使用的资源实际上是字体族的加粗斜体表达式。它所知道的是，您说这个字体必须用于 weight: 100/style:normal，因此在类似以下内容的情况下，它将使用它：

body {
  font-family: MyFont, sans-serif /* weight mismatch, so this will probably fall through */
}

h1 {
  weight: 100; /* weight/style match: this will use myfont-Bold-Italic.ttf! */
}

2019年编辑

OpenType引入了字体变体（FVAR），它允许单个字体编码无限的可变矢量图形，这意味着如果你要针对的浏览器支持FVAR OpenType，现在可以使用一个新的format字符串来加载一个单一的字体作为你的@font-face指令，并且可以在普通的CSS中通过指定font-variation-settings属性来指定你需要的特定变体:

@font-face {
  font-family: MyFont;
  src: url('myfont-Bold-Italic.ttf') format("truetype-variation");
  /* no weight or style information here anymore */
}


body {
  font-family: MyFont;
  font-variation-settings: 'wght' 435;
}

h1 {
  font-variation-settings: 'wght' 116;
}

尽管“普通”的CSS只支持9种字重（在100到900之间，步长为100），但变体可以使用从1到1000的值，步长为1。

- Mike 'Pomax' Kamermans

Answer 2

每种字体（如果有不同粗细）都有单独的TrueType格式文件，对应每种粗细。

例如：

Roboto.ttf
Roboto-Italic.ttf
Roboto-Bold.ttf

因此，您需要在CSS文件中指定哪个是哪个，如下所示：

@font-face {
    font-family: 'Roboto';
    font-weight: normal;
    url('fonts/Roboto.ttf') format('truetype')/*ttf*/;
}

@font-face {
    font-family: 'Roboto';
    font-weight: bold;
    url('fonts/Roboto-Bold.ttf') format('truetype')/*ttf*/;
}

@font-face {
    font-family: 'Roboto';
    font-weight: lighter;
    font-style: italic;
    url('fonts/Roboto-Italic.ttf') format('truetype')/*ttf*/;
}

在您的情况下，您可以通过在Windows/MacOS/Linux资源管理器中双击文件来直接查看特定文件。

如果您想使用第三方软件解决方案，我建议您看一下opentype.js。

- Tanasos

---

注意，随着 OpenType 引入变量轴，这个说法已经不再严格正确。现在单个字体可以编码无限多的字重，以及（实际上）任意一个或多个变量轴，由一个或多个字体设计师认为合适。因此，您不需要指定不同的字体，只需指定单个字体，然后在您的 class CSS 中使用 font-variation-settings CSS 属性指定要钳制哪些变量轴的值即可。 - Mike 'Pomax' Kamermans