CSS字体系列名称对哪些操作系统或浏览器区分大小写

Question

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

我通常总是使用混合大小写的值，但我想知道小写值是否会起作用？

我没有任何一种压倒性的偏好 - 但我讨厌一个页面呈现不同，因为我在CSS文件中的某处键入了一个小写的"v"与"V" 。

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

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

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

Answer 1

虽然CSS语法概述说

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

css3-fonts模块部分要求不区分大小写的比较：

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

所以CSS3规范要求对字体名称进行不区分大小写的处理。

Answer 2

这个人在使用flex时似乎有问题，所以似乎有一些道理：

在Flex中使用CSS来设置组件样式时，font-family属性在某些操作系统上可能区分大小写。 例如，以下CSS无法在我的Safari浏览器上使用Flash Player 10：

 .content{font-family: arial;} 

但这会奏效：

 .content{font-family: Arial;} 

资源

另请查看此页面，您可以在自己的浏览器/ os中查看此页面：

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

Answer 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中显示了这两行。 但是仍然有移动浏览器没有经过测试，所以你应该努力使用适当的大写以防万一。

Answer 4

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

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