与之匹配的 CSS @font-face 规则中 local() 的值是什么？答案

【问题标题】：What is the value of local() in a CSS @font-face rule matched against?与之匹配的 CSS @font-face 规则中 local() 的值是什么？
【发布时间】：2015-12-04 21:33:35
【问题描述】：

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

我见过各种本地系统字体的命名方式，例如：

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

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

名称是否区分大小写？

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

编辑：

我在问对于同一字体系列的不同粗细和样式，我应该使用哪些字符串作为 local() 值。 local() 匹配的字符串值是什么？

【问题讨论】：

标签： css fonts font-face

【解决方案1】：

根据@font-face specification 为src：

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

【讨论】：