同一个网页在不同的浏览器里面字体不一样？

jrchen36
6月9日 提问

0 关注
0 收藏，538 浏览

0

维基百科的首页,

在chrome和oprea里打开，字体明显不一样。

我看了一下源代码，写得都是

font-family: sans-serif;

难道浏览器的默认字体会不一样么？

前端新人请教。

html
前端

链接
1 评论
更多

3 个回答

0
采纳



jrchen
366月10日 回答

这个问题我在SO上问了，大家可以看这里。

原来在chrome里有默认的字体设置，wiki的网站太懒没有把字体写全，加上我chrome里面默认是宋体，所以导致的这个现象。

链接
2 评论
更多

2



Humphry
5.5k6月13日 回答 ·
6月13日 更新

（第101个回答，在101板块什么的。）

先解释一下Generic-family。Generic-family是可用于font-family的一类值，它只有五种可能：

serif

、

sans-serif

、

monospace

、

cursive

、

fantasy

，用于表示一类字体。由于它的优先级高，覆盖面广，一般会写在最后，用作最终的Fallback的选择。

font-family匹配机制的流程大致如下(图片由graphviz绘制)：





IE系列仅仅提供一个用于最终的fallback的默认字体设置（在上图中

Default

这一步），如下图，IE11的截图。





Chrome这个过程中比较特殊的一点是，它还可以针对不同的generic-family设置不同的字体（在

G3

这一步）。





Firefox和chrome一样：





关于font-family，可以highlight一下这个slideshow，基本上把机制都给写透了。

（鉴于现在中文互联网的优质前端资源很容易消失，建议去GitHub弄一份回来慢慢啃）。