11

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

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

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

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

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

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

4 回答 4

12

虽然CSS 语法概述说

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

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

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

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

于 2012-03-16T05:31:20.923 回答
3

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

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

.content{font-family: arial;}

但这会起作用：

.content{font-family: Arial;}

来源

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

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

于 2009-10-21T18:17:57.023 回答
2

我的猜测是，这只会在文件系统区分大小写的 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 中显示了这两个行。不过，仍有一些移动浏览器没有经过测试，因此您应该努力使用正确的大小写以防万一。

于 2009-10-21T19:32:00.370 回答
0

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

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

于 2009-10-21T18:18:29.140 回答