CSS字体系列名称对哪些操作系统或浏览器区分大小写
-
05-07-2019 - |
题
根据 sitepoint ( a source我通常非常信任)在指定 font-family
名称时,某些操作系统/浏览器 可能 区分大小写强>
我通常总是使用混合大小写值,但我想知道小写值是否会起作用?
我没有任何一种压倒性的偏好 - 但是我讨厌以不同的方式呈现页面,因为我输入了一个小写" v"
vs "在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维度中定义了两个交集区域为零的集合。