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

Question

维基百科的首页,
在chrome和oprea里打开，字体明显不一样。
我看了一下源代码，写得都是

font-family: sans-serif;

难道浏览器的默认字体会不一样么？
前端新人请教。

Answer 1

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

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

Answer 2

（第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弄一份回来慢慢啃）。

Answer 3

应该是每个浏览器的字体渲染不一致。你会看到web字体转换的时候其实是有多种格式的，原因就是不同浏览器所需要的字体格式不同。