The “lang” attribute changed my font settings in Google Chrome
fonts, google-chrome, html
Solution
"In Chinese versions of Microsoft Windows XP and older, the default interface typefaces are seriffed (MingLiU and SimSun), which is inconsistent with the sans-serif styling use in most other (including East Asian) regions of the product. Starting in Windows Vista, the default interface typefaces in all regions were changed to sans-serif styles, using Microsoft JhengHei in Traditional Chinese environments and Microsoft YaHei in Simplified Chinese environments."
From Wikipedia.org http://en.wikipedia.org/wiki/East_Asian_sans-serif_typeface
Solution:
Use a different font style. Chinese and Western users will get different fonts, even though they have the same name.
Alternatively, you could use the :lang(Lang-Code) rule to differentiate the font styles. Here's an example:
<!doctype html>
<html>
<head>
<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
<style type="text/css">
body {
font-family: "Times New Roman", serif;
}
:lang(zh-ch){
font-family: SimSum-18030,SimHei, serif;
}
</style>
</head>
<body>
<div lang="zh-ch">Chinese font </div>
<div>Default font.</div>
</body>
</html>
Demo: http://jsfiddle.net/wCuND/
More information here.
http://www.w3.org/International/questions/qa-css-lang.en.php
Problem
For example: ``` <!doctype html> <html lang="zh-cn"> <head> <style type="text/css"> body { font-family: sans-serif; } </style> </head> <body> <div>Test.</div> </body> </html> ``` This HTML document display a font that is not my browsers sans-serif font. For me, it is SimSun. ``` <!doctype html> <html> <head> <style type="text/css"> body { font-family: sans-serif; } </style> </head> <body> <div>Test.</div> </body> </html> ``` And this is normal. It only affect the font in Google Chrome, I think it may be something to do with CSS property “-webkit-locale”. Is this normal? How can I set the font for “sans-serif” so that the “lang” attribute doesn’t change the font?