html - “lang” 属性更改了我在 Google Chrome 中的字体设置

标签 html google-chrome fonts

例如:

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

这是正常的。

它只影响 Google Chrome 中的字体,我认为这可能与 CSS 属性“-webkit-locale”有关。

这正常吗?如何为“sans-serif”设置字体,以便“lang”属性不会更改字体?

最佳答案

“在中文版的Microsoft Windows XP及更早版本中,默认界面字体 有衬线(MingLiU 和 SimSun),这与无衬线样式不一致 在该产品的大多数其他(包括东亚)地区使用。 从 Windows Vista 开始,更改了所有地区的默认界面字体 到 sans-serif 样式,在繁体中文环境中使用 Microsoft JhengHei 以及简体中文环境中的 Microsoft YaHei。”

来自维基百科.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/

更多信息在这里。

http://www.w3.org/International/questions/qa-css-lang.en.php

关于html - “lang” 属性更改了我在 Google Chrome 中的字体设置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10661954/

相关文章:

Javascript 自动完成函数 href

html - 使用 Bootstrap 在一行中输入框和标签

html - 如何在表中实现colspan

javascript - css3 关键帧过渡在 chrome 中不起作用?

javascript - 没有详细信息的 Chrome 未捕获错误?

ios - 分配自定义字体时出现异常

html - Chrome 更新突然中断@font-face

javascript - Fabric.js 一些自定义字体以非常小的尺寸和错误的字体呈现

javascript - 如何判断HTML元素是否有伪元素?

javascript - Chrome网络检查器: CPU profiler