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，您现在可以加载单一字体作为您的 @987654332 @ 指令，带有一个新的 format 字符串来指示它是变量，而是在您的普通 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。

Answer 2

每种字体（如果有粗细）都包含在一个单独的真字体格式文件中，用于字体的每种粗细。

例如

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