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?
If your Google Chrome font changed by itself, you can fix the problem by resetting the font settings. Click on Settings from the menu to open the Chrome settings page. Scroll down to the Web Content option and then select Customize Fonts.
To change the text font in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property font-family, font-size, font-style, etc.
The default font set on a Windows computer is Times New Roman. Serif: A serif is a font style where a stroke or a small line is added to an alphabet to enhance it. This typography style is generally found in Font types such as Courier, Times Roman (Default) and Palatino.
"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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With