CSS:如何告诉某些ttf字体的功能？

Question

我有一个任意ttf字体,我想在我的Web应用程序中使用.

如何辨别出这种字体中的"粗体","斜体"等特征？

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

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

并且,就您刚刚定义的页面样式而言,使用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! */
}

Answer 2

每种字体（如果权重可用）都针对该字体的每种权重都有一个单独的 True Type 格式文件。

例如

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。