我有一个任意的ttf字体,我想在我的Web应用程序中使用它。
我如何知道此字体可用哪些特性,例如“粗体”、“斜体”等?
背景:我希望避免尝试所有不同的设置,例如:
font-weight: bold;
font-style: italic;
为了查看哪一个对我的网站上字体的外观有影响。
我有一个任意的ttf字体,我想在我的Web应用程序中使用它。
我如何知道此字体可用哪些特性,例如“粗体”、“斜体”等?
背景:我希望避免尝试所有不同的设置,例如:
font-weight: bold;
font-style: italic;
让我简单概括一下:这不是 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。
Roboto.ttf
Roboto-Italic.ttf
Roboto-Bold.ttf
@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。
font-variation-settings
CSS 属性指定要钳制哪些变量轴的值即可。 - Mike 'Pomax' Kamermans