解决 Chrome/Firefox 中 Sans-serif 字体显示的问题

95 阅读 0 评论 63 点赞

我是靠谱客的博主过时摩托，最近开发中收集的这篇文章主要介绍解决 Chrome/Firefox 中 Sans-serif 字体显示的问题，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

用上 Mac 之后，喜欢上了一种字体——“雅痞-简”（Yuppy SC）。于是在 Chrome 与 Firefox 中将 Sans-serif 字体设置为 Yuppy SC，却发现在 Chrome 中能正常显示，在 Firefox 中不能正常显示。这篇文章分享的就是如何解决这个字体显示问题。

英文版 Chrome 中的字体设置：

英文版 Firefox 中的字体设置：

这样设置之后，Chrome 中显示正常，下面就是“雅痞-简”的显示效果：

但在 Firefox 中显示的却是一种未知的默认字体：

博客园首页的 css 中对字体是这样定义的：

body { font-family: Verdana,Arial,Helvetica,sans-serif; }

由于 css 中没有定义中文字体，所以浏览器显示中文时，会用其设置中针对 Sans-serif 定义的默认字体（这里是“雅痞-简”）进行显示。

Chrome 表现正常，Firefox 表现诡异，当时以为是 Mac 版 Firefox 本身的问题。再加上平时主要用 Chrome，很少用 Firefox，也就没去研究这个问题。

今天在 Firefox 中用 Google 搜索时突然发现正常显示了“雅痞-简”字体，在搜索结果中打开豆瓣网站，也能正常显示“雅痞-简”字体。既然这两个网站都能正常显示，那说明不是 Firefox 程序本身的问题，肯定有办法解决，动手！

开始以为是 css 的问题，但即使使用与 Google 或豆瓣同样的 css 定义，也是同样的问题。

后来直接在 css 中将字体定义为“雅痞-简”（Yuppy SC）：

body { font-family: Yuppy SC; }

竟然正常显示了。

当时的分析是：Firefox 虽然正常解析了 css 中的 sans-serif，但是并没有使用为其定义的 Yuppy SC 字体（可能不匹配某些条件），而是使用了一种 Firefox 默认的字体。

再看一下之前的那张 Firefox 字体设置图：

看第一行文字“Fonts for: Simplified Chinese”，这个设置是针对简体中文页面的。没有使用下面设置的字体进行显示，说明 Firefox 并不知道这是一个简体中文页面。虽然在页面中通过 <meta charset="utf-8"> 定义了字符集，但 Simplified Chinese 是 UTF-8 的子集，因此 Firefox 不知道当前页面是“简体中文”合情合理。

为什么 Google 与豆瓣能正常显示呢？有了上面的线索，就容易找到问题的原因。经过比较发现：

在 Google 页面的 HTML 代码中有这样一行（注意加粗的部分）：

<body marginheight="3" lang="zh" id="gsr" topmargin="3" class="tbo">

在豆瓣页面的 HTML 代码中有这样一行（注意加粗的部分）：

<html lang="zh-CN" class="ua-mac ua-ff19 book-new-nav">

看到这个不同之处，恍然大悟。原来在 HTML 中还有 lang 这个属性，之前真没注意过。通过这个属性，浏览器可以清楚地知道当前页面所用的语言。

于是，采用了豆瓣的方法（<html lang="zh-cn">）解决了 Firefox 的字体显示问题：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>博客园 - 程序员的网上家园</title>

本来以为问题就此解决了，可是回到 Chrome 中一看，Firefox 中的问题在 Chrome 中重演了 —— Chrome 不以“雅痞-简”显示网页，而是以默认的宋体进行显示（Google 与豆瓣也存在同样的问题）。

也就是说在英文版 Chrome 中针对 Sans-serif 设置的字体对中文网页（HMTL代码中有 lang="zh" 或 lang="zh-cn"）不起作用。

不设置 lang="zh-cn"，Firefox 不能正常显示；设置了 lang="zh-cn"，Chrome 不能正常显示。

要 Chrome 还是要 Firefox，这是个问题？这不是问题，真正的问题是如何两者都要？

偏爱 Chrome 多一些，那就先把 lang="zh-cn" 去掉；那 Firefox 呢，另想办法。

之前已经分析过，Firefox 中不能显示“雅痞-简”（Yuppy SC）字体是因为 Firefox 不知道当前页面是简体中文（HTML 中没有 lang="zh-cn"）。那么 Firefox 肯定把这个页面当作了另外一种语言来显示，我们只要找出是哪个语言，然后针对这个语言将 Sans-serif 设置为 Yuppy SC，就能解决这个问题。

基于这个想法，找出了另外一种语言，它就是 Western，针对 Western 将 Sans-serif 设置为 Yuppy SC，问题立即解决！见下图：