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

StackOverflow https://stackoverflow.com/questions/1602586

题

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

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

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

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

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

div.bar{
  font-family:verdana, arial, helvetica;
}
有帮助吗？

解决方案

我的猜测是这只是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中显示了这两行。但是仍然有一些未经过测试的移动浏览器，因此您应该努力使用适当的大小写以防万一。

其他提示

虽然 CSS语法概述说

  

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

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

  

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

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

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

  

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

.content{font-family: arial;}
     

但这会奏效：

.content{font-family: Arial;}

源

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

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

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top