语言设置与字体渲染的纠葛

问题流水账

前段时间遇到一个显示问题，现象是在英文版Mac 端 chrome 浏览器，内容字体不正确，原本应该是无衬线字体，变成了衬线字体（类似于原本应该显示为“微软雅黑”，但是显示成了“宋体”）。试 safari，显示正常。同一台电脑，相同的代码，不同的浏览器，竟然会有这个差异；

代码

<div class="v-submit-btn">立即提交</div>

body,
button,
input,
select,
textarea {
  font: 12px/1.5 Helvetica Neue, Helvetica, Arial, Hiragino Sans GB, \5fae\8f6f\96c5\9ed1, tahoma,
    simsun, \5b8b\4f53;
}

.v-submit-btn {
  font-family: \5fae\8f6f\96c5\9ed1; //微软雅黑
}

先不讨论写法是否合理，我们来挖一挖为什么会显示成类似宋体的样子；

Mac 上是安装了微软雅黑字体的，经过实验，chrome 上微软雅黑不可用，safari 上可用，所以 safari 上“立即提交”是按“微软雅黑”字体显示的。但是 chrome 上微软雅黑没有生效，应该会使用从 body 继承的字体设置？这样是不是至少会显示成 Hiragino Sans GB（冬青黑）？

但实际 chrome 也没有用冬青黑渲染，也就是说 body 上 font 设置的 font-family 并没有生效，因为后边 v-submit-btn 的 font-family 样式覆盖了它。那这个类宋体的字体从哪里来的呢？如果 css 设置没有生效，浏览器会应用其默认字体。浏览器字体设置如下

也就是英文系统下，浏览器应用了 Standard 设置，也就是font-family:Times, 而 Times 是一种衬线字体，浏览器在选择对应的中文衬线字体时，选择了一种类似宋体的字体(很像华文宋体)，具体是哪个也没有查到确切信息。调整 Standard 设置为苹方时，果然字体变成苹方了；

于是尝试调整了 Mac 的系统语言为中文，chrome 的默认字体设置变成了如下，自然“立即提交”的字体也就变成了苹方；

我们的页面一般都是没有设置 content-Language 的，那我们是否可以通过设置网页的语言，来让浏览器更贴近我们的预期呢？毕竟微软雅黑不生效，能用同样的无衬线字体代替也没有那么严重的违和感。

通过在 html 节点上设置属性lang="zh"，即使在英文系统下，整个页面的默认字体也变成苹方了；

总结

页面语言设置，会影响 chrome 的默认字体选择；比如英文会默认使用 Times（衬线字体），而 cjk（chinese、Japanese、Korean）默认会使用无衬线字体。
font-family 这个 css 属性，只要设置了合乎语法的值，此条 css 规则就会生效并覆盖继承过来的值，而不管设置的字体是否存在，不存在则使用浏览器默认设置，这和我以往对 css 属性覆盖的认知有一点细微区别。
内容字体设置不合理，就算将字体设置为 font-family: \5FAE\8F6F\96C5\9ED1, sans-serif; 也不会出现 fallback 到宋体而出现那么强的违和感。在页面内部分内容单独设置字体时，如果只写需要的字体，不同平台容易造成兼容性问题。
整站字体设置设置还存在改进空间，比如跨平台考虑（Android、iOS、windows、Mac），其次是字体最后补上字体族名称（serif、sans-serif）

问题流水账

总结

参考