Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 793
EFanZh Avatar asked May 19 '12 02:05

EFanZh


People also ask

Why is my font different in Chrome?

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.

What is the attribute to change the font style?

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.

What is Chrome default font settings?

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.


1 Answers

"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

like image 140
Larry Battle Avatar answered Sep 21 '22 15:09

Larry Battle