Question

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

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

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

e.g。有没有已知的情况，下面有foo和bar类的2个div实际上会用不同的字体呈现？

div.foo{ font-family:Verdana, Arial, Helvetica; } div.bar{ font-family:verdana, arial, helvetica; }

Answer 1

虽然CSS syntax overview说

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

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

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

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

Answer 2

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

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

Source

另请查看此页面，您可以在自己的浏览器/ 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维度中定义了两个交集区域为零的集合。

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

4 个答案: