Question

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

我怎样才能分辨出哪些特征如＆＃34;粗体＆＃34;，＆＃34;斜体＆＃34;有这种字体吗？

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

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! */
}

Answer 2

每种字体（如果可用的权重）都有一个单独的真实类型格式文件，用于字体的每个权重。

e.g。

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 。

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

2 个答案: