“lang”属性改变了我在谷歌浏览器中的字体设置答案

【问题标题】：The “lang” attribute changed my font settings in Google Chrome“lang”属性改变了我在谷歌浏览器中的字体设置
【发布时间】：2012-05-26 13:52:53
【问题描述】：

例如：

<!doctype html>
<html lang="zh-cn">
    <head>
        <style type="text/css">
            body
            {
                font-family: sans-serif;
            }
        </style>
    </head>
    <body>
        <div>Test.</div>
    </body>
</html>

此 HTML 文档显示的字体不是我的浏览器无衬线字体。对我来说，是 SimSun。

<!doctype html>
<html>
    <head>
        <style type="text/css">
            body
            {
                font-family: sans-serif;
            }
        </style>
    </head>
    <body>
        <div>Test.</div>
    </body>
</html>

这是正常的。

它只影响谷歌浏览器中的字体，我认为这可能与CSS属性“-webkit-locale”有关。

这正常吗？如何设置“sans-serif”的字体，使“lang”属性不会改变字体？

【问题讨论】：

这似乎也会影响 Firefox 和 Opera。

标签： html google-chrome fonts

【解决方案1】：

"在中文版 Microsoft Windows XP 及更早版本中，默认界面字体有衬线（MingLiU 和 SimSun），这与无衬线样式不一致在产品的大多数其他（包括东亚）地区使用。从 Windows Vista 开始，所有地区的默认界面字体都已更改无衬线样式，在繁体中文环境中使用 Microsoft JhengHei 和简体中文环境中的 Microsoft YaHei。”

来自 Wikipedia.org http://en.wikipedia.org/wiki/East_Asian_sans-serif_typeface

解决方案：

使用不同的字体样式。中西用户即使同名也会得到不同的字体。

或者，您可以使用 :lang(Lang-Code) 规则来区分字体样式。这是一个例子：

<!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>

演示： http://jsfiddle.net/wCuND/

【讨论】：