On which operating systems or browsers are CSS font-family names case-sensitive
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?
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.
e.g. are there 开发者_StackOverflow社区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;
}
Although the CSS syntax overview says
The following rules always hold: All CSS style sheets are case-insensitive, except for parts that are not under the control of CSS. For example, the case-sensitivity of values of the HTML attributes "id" and "class", of font names, and of URIs lies outside the scope of this specification. Note in particular that element names are case-insensitive in HTML, but case-sensitive in XML.
The css3-fonts module section mandates case-insensitive comparison:
For other family names, the user agent attempts to find the family name among fonts defined via @font-face rules and then among available system fonts, matching names with a case-insensitive comparison.
so the CSS3 specification requires that font-names be treated case-insensitively.
This guy seems to have problems when using flex, so there seems to be some truth to this:
When using CSS in Flex to style components, the font-family property can be case sensitive on some operating systems. For example, the following CSS will not work on my Safari browser with Flash Player 10:
.content{font-family: arial;}but this will work:
.content{font-family: Arial;}
Source
Also take a look at this page that you can use to check this in your own browsers/os:
http://meyerweb.com/eric/css/tests/font-name-case-test.html
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:\Windows\Fonts directory.
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.
Something like this:
<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>
If only one line shows up in Courier, then that browser is case sensitive.
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.
A nice question indeed. I personally have not heard of any issues that have something to do with case sensitivity.
What you should worry about more is about the presence of these fonts on various systems. Verdana and Arial are not available on Mac. Helvetica is not available on Windows. You have defined two sets with zero intersection area in the Win/Mac dimensions.
加载中,请稍侯......
精彩评论