在哪些操作系统或浏览器上，CSS 字体系列名称区分大小写答案

【问题标题】：On which operating systems or browsers are CSS font-family names case-sensitive在哪些操作系统或浏览器上，CSS 字体系列名称区分大小写
【发布时间】：2010-12-08 19:46:36
【问题描述】：

根据sitepoint（我通常高度信任的来源）在指定 font-family 时命名某些操作系统/浏览器可能 区分大小写。

我通常总是使用大小写混合的值，但我想知道小写值是否也一样？

无论哪种方式，我都没有压倒性的偏好 - 但我不希望页面呈现不同的方式，因为我在 CSS 文件的某处输入了小写的 "v" 与 "V"。

例如是否有任何已知的情况，其中具有以下 foo 和 bar 类的 2 个 div 实际上会使用不同的字体呈现？

div.foo{
  font-family:Verdana, Arial, Helvetica;
}

div.bar{
  font-family:verdana, arial, helvetica;
}

【问题讨论】：

Sitepoint 文本使用黄鼠狼字。 “某些 X 可能会导致 Y。”这句话听起来像是一个政客写的。它应该说明哪些操作系统/浏览器区分大小写，或者至少举一个例子。没有它，它听起来是编造的。

标签： css fonts cross-platform cross-browser case-sensitive

【解决方案1】：

虽然CSS syntax overview 说

以下规则始终成立：除了不受 CSS 控制的部分之外，所有 CSS 样式表都不区分大小写。例如，HTML 属性“id”和“class”、字体名称以及 URI的值的大小写敏感度超出了本规范的范围。请特别注意，元素名称在 HTML 中不区分大小写，但在 XML 中区分大小写。

css3-fonts module 部分要求进行不区分大小写的比较：

对于其他家族名称，用户代理尝试在通过@font-face 规则定义的字体中查找家族名称，然后在可用的系统字体中查找家族名称，匹配名称不区分大小写。

因此 CSS3 规范要求字体名称不区分大小写。

【讨论】：

【解决方案2】：

这家伙在使用flex的时候似乎有问题，所以这话似乎有些道理：

在 Flex 中使用 CSS 来设置样式时组件，font-family 属性在某些情况下可能区分大小写操作系统。例如，以下 CSS 不适用于我的带有 Flash Player 10 的 Safari 浏览器：
.content{font-family: arial;}
但这会起作用：
.content{font-family: Arial;}

Source

还可以查看此页面，您可以使用该页面在您自己的浏览器/操作系统中进行检查：

http://meyerweb.com/eric/css/tests/font-name-case-test.html

【讨论】：

Flex CSS 只是从网络上借来的，但它是不同的（即有限的属性支持，在编译时而不是运行时解释）。

【解决方案3】：

我的猜测是，这只会在文件系统区分大小写的 Linux/Unix 系统上成为潜在问题。如果任何 Windows 浏览器对此有问题，我会感到惊讶，因为字体只是 C:\Windows\Fonts 目录中的文件。

您可以尝试使用可识别字体（如 Courier New）制作包含测试文本的页面，但将其拼写为“CoUrIEr nEW”，然后转到http://browsershots.org/，它将从大量浏览器生成屏幕截图。确保字体也很大，因为屏幕截图很小。

类似这样的：

<html>
<head>
<style type="text/css">
#proper   { font: bold 48px "Courier New",Courier; }
#improper { font: bold 48px "CoUrIEr nEW",CoUrIEr; }
</style>
</head>
<body>
<p id="proper">Test1 - proper caps</p>
<p id="improper">Test2 - improper caps</p>
</body>
</html>

如果只有一行显示在 Courier 中，则该浏览器区分大小写。

编辑：我在 browsershots 中测试了上面发布的 HTML。我没有找到任何不起作用的浏览器。用于 Ubuntu Linux 的 Dillo 2.1.1 不喜欢这两条线（也许该系统缺少 Courier New 和 Courier？），所有其他的都在 Courier 或 Courier New 中显示了两条线。不过，仍有一些移动浏览器未经测试，因此您应该努力使用正确的大小写以防万一。

【讨论】：

在 Linux/Unix 系统上也不是问题。字体名称与存储字体数据的文件名不同。浏览器正在寻找操作系统知道的字体名称，而不是文件名。
这实际上并没有回答问题。

【解决方案4】：

确实是一个很好的问题。我个人没有听说过任何与区分大小写有关的问题。

您更应该担心的是这些字体在各种系统上的存在。 Verdana 和 Arial 在 Mac 上不可用。 Helvetica 在 Windows 上不可用。您已经在 Win/Mac 维度中定义了两个交集区域为零的集合。

【讨论】：

非常正确...我的示例可能不是最好的情况...我应该使用跨平台字体系列对其进行更新。