Why do newlines in my CSS font-family break IE? How can I avoid this?
My designer wanted Century Gothic, which is not quite web safe, so we decided lucida was an OK backup and I wrote a long stack of fallback fonts:
body {
font-family: "Century Gothic",
开发者_运维百科 "URW Gothic L",
"Apple Gothic",
"Lucida Grande",
"Lucida Sans Unicode",
"Trebuchet MS",
"Lucida Sans",
sans-serif;
}
This looks fine in Chrome, FF, Safari. When I check in IE (6, 7, and 8), no dice. Fonts everywhere on the site are an ugly serif typeface! I fire up IE 8 developer tools and see little rectangle characters in the declaration that seem to fall on the line breaks. I revise my CSS to
body {
font-family: "Century Gothic", "URW Gothic L", "Apple Gothic", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", "Lucida Sans", sans-serif;
}
and this works mint. Fine, problem solved, but if I want to format my CSS for readability why shouldn't I be able to? Why is my whitespace relevant? Is this a utf/iso charset issue? Do I just have to let long lines run long?
Is this a separate style sheet or is it styles you created in your tag? You may be able to pull it out into a .css file and that may stop the issue.
IMO let this one go. This should be the exception not the rule for you to have a css rule that is this long.
Probably your text editor is saving the css file with mac specific line-breaks (carriage-return). Change the line breaks to unix (line-feed) and see if it comes out how you'd like.
精彩评论