CODEWITHSUNDEEP
htmlgoogle-chromefonts
EFanZh
EFanZh

Reputation: 2436

The “lang” attribute changed my font settings in Google Chrome

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?

Upvotes: 6

Views: 3160

Answers (1)

Larry Battle
Larry Battle

Reputation: 9178

"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

Upvotes: 5

Related Questions