代码之家 › 专栏 › 技术社区 › scunliffe

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

case-sensitive cross-browser cross-platform fonts css

scunliffe · 技术社区 · 15 年前

根据 sitepoint ( 我通常高度信任的消息来源 )当指定 font-family 命名一些操作系统/浏览器可以是 区分大小写 .

我通常都使用混合大小写值,但我想知道小写值是否也可以工作?

我也没有压倒性的偏好——但是我不想让一个页面以不同的方式呈现,因为我键入了一个小写字母。 "v" VS "V" 在CSS文件中的某个位置。

例如,是否有任何已知的情况下,两个潜水器 foo 和 bar 下面的类实际上会用不同的字体呈现?

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

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

4 回复 | 直到 12 年前

Kip 15 年前

我的猜测这仅仅是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中,然后浏览器区分大小写。

编辑 :我在浏览器快照中测试了上面发布的HTML。我找不到任何不起作用的浏览器。用于Ubuntu Linux的dillo 2.1.1不喜欢这两行(可能该系统同时缺少Courier New和Courier?)所有其他人都在快递或新快递中显示了这两行。不过,仍然有一些移动浏览器没有经过测试,所以您应该尽量使用适当的大写字母以防万一。

Mike Samuel 12 年前

虽然 CSS syntax overview 说

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

这个 css3-fonts module 章节要求不区分大小写的比较:

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

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

Espo 15 年前

这家伙在使用flex时似乎有问题,所以这似乎是有道理的:

在灵活样式中使用CSS时组件,字体系列属性可以区分大小写操作系统。例如, 以下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

user151323 15 年前

真是个好问题。我个人没有听说任何与案件敏感性有关的问题。

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