本文介绍了在哪些操作系统或浏览器上 CSS 字体系列名称区分大小写的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

根据sitepoint(一个来源我通常高度信任)在指定font-family名称时,某些操作系统/浏览器可能区分大小写.

According to sitepoint (a source I typically highly trust) when specifying font-family names some Operating Systems/Browsers may be case-sensitive.

我通常总是使用大小写混合的值,但我想知道小写值是否也能正常工作?

I've typically always used mixed-case values but I'm wondering if lower-case values will work just the same?

无论哪种方式我都没有压倒性的偏好 - 但我讨厌页面呈现不同,因为我输入了小写的 "v""V" CSS 文件中的某个位置.

I don't have an overwhelming preference either way - but I'd hate for a page to render differently because I typed a lower-case "v" vs. "V" somewhere in a CSS file.

例如是否有任何已知的情况,其中带有 foobar 类的 2 个 div 实际上会以不同的字体呈现?

e.g. are there any known cases where 2 divs with the foo and bar classes below would actually render with a different font?

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

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

推荐答案

我的猜测是,这只会在文件系统区分大小写的 Linux/Unix 系统上成为潜在问题.如果任何 Windows 浏览器对此有问题,我会感到惊讶,因为字体只是 C:WindowsFonts 目录中的文件.

My guess is that this would only be a potential problem on Linux/Unix systems, where the file system is case sensitive. I'd be surprised if any Windows browser had a problem with this, since fonts are just files in the C:WindowsFonts directory.

您可以尝试使用可识别的字体(例如 Courier New)制作带有测试文本的页面,但将其拼写为有趣的(例如CoUrIEr nEW"),然后转到 http://browsershots.org/ 它将从大量浏览器生成屏幕截图.一定要让字体也很大,因为截图很小.

You could try making a page with test text in a recognizable font like Courier New, but spell it funny like "CoUrIEr nEW", then go to http://browsershots.org/ where it will generate screenshots from tons of browsers. Be sure to make the font very large too, because the screenshots are small.

像这样:

<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 中,则该浏览器区分大小写.

If only one line shows up in Courier, then that browser is case sensitive.

编辑:我在浏览器截图中测试了上面发布的 HTML.我没有找到任何不起作用的浏览器.Ubuntu Linux 的 Dillo 2.1.1 不喜欢任何一行(也许该系统缺少 Courier New 和 Courier?),所有其他版本都在 Courier 或 Courier New 中显示这两行.不过,仍有一些移动浏览器没有经过测试,因此您应该努力使用正确的大小写以防万一.

Edit: I tested the HTML I posted above in browsershots. I didn't find any browser that didn't work. Dillo 2.1.1 for Ubuntu Linux didn't like either line (maybe that system lacked both Courier New and Courier?), all others showed both lines in Courier or Courier New. There are still mobile browsers that were not tested, though, so you should strive to use proper capitalization just in case.

这篇关于在哪些操作系统或浏览器上 CSS 字体系列名称区分大小写的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

06-14 18:01