CSS @ font

CSS @ font-face规则中匹配的local（）的值是多少？(What is the value of local() in a CSS @font-face rule matched against?)

我正在为我的网站编写@ font-face规则。

我已经看到了各种本地系统字体的命名，例如：

"FontName" "Font Name" "Font-Name" "Font Name Bold" "Font-Name-Bold" "FontNameBold"

操作系统是否遵循有关字体命名的任何规则？

名称是否区分大小写？

我知道Windows列表字体中的字体选择器在一个字段中按名称列出，并且权重在不同的字段中。 “Font Name Bold”会在Windows上与字体名称的粗体字符匹配吗？

编辑：

我问的是我应该使用哪些字符串作为同一字体系列的不同权重和样式的local()值。 local()匹配的字符串值是多少？

I am writing @font-face rules for my Web site.

I’ve seen various kinds of naming for local system fonts, like:

"FontName" "Font Name" "Font-Name" "Font Name Bold" "Font-Name-Bold" "FontNameBold"

Do the operating systems follow any rules regarding the naming of fonts?

Are the names case-sensitive?

I know the font chooser in Windows list fonts by name in one field, and the weight is in a different field. Would a "Font Name Bold" match a bold font of family Font Name on Windows?

edit:

I’m asking what strings should I use as the local() value for different weights and styles of the same font family. What is the string value of local() matched against?

最满意答案

根据src的@ font-face规范 ：

对于OpenType和TrueType字体，此字符串仅用于匹配本地可用字体的名称表中的Postscript名称或完整字体名称。 使用哪种类型的名称因平台和字体而异，因此作者应包括这两个名称以确保跨平台的正确匹配。

所以答案是，字面意思是“它取决于解析@ font-face规则的内容”。 值得庆幸的是，这是CSS，因此我们可以指出多个来源，其中包括多个local来源：

@font-face { font-family: "My Gentium", src: local(Gentium Bold), /* full font name */ local(Gentium-Bold), /* Postscript name */ url(GentiumBold.woff); /* otherwise, download it */ font-weight: bold; }

As per the @font-face specification for src:

For OpenType and TrueType fonts, this string is used to match only the Postscript name or the full font name in the name table of locally available fonts. Which type of name is used varies by platform and font, so authors should include both of these names to assure proper matching across platforms.

So the answer is, quite literally, "it depends on what's parsing the @font-face rule". Thankfully, this is CSS, so we can indicate multiple sources, which includes multiple local sources:

@font-face { font-family: "My Gentium", src: local(Gentium Bold), /* full font name */ local(Gentium-Bold), /* Postscript name */ url(GentiumBold.woff); /* otherwise, download it */ font-weight: bold; }