javascript - CSS:如何判断某个ttf字体具有的特征？

Question

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

我如何判断该字体有哪些特征，如“粗体”、“斜体”？

背景:我想避免我必须尝试所有不同的设置，例如:

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

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

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;
}

就您刚刚定义的页面样式而言，使用具有正常样式和权重 100 的 MyFont 将加载您认为应该使用的任何 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，您现在可以加载单一字体作为您的 @font-face 指令，带有一个新的 format 字符串，表明它是可变的，而不是在你的普通 CSS 中通过指定 font-variation-设置属性:

@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。