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

jrchen 36 6月9日 提问

• 0 关注
• 0 收藏，538 浏览

0

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

font-family: sans-serif;

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

• html
• 前端

• 链接
• 1 评论
• 更多

3 个回答

0

采纳

jrchen 36 6月10日 回答

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

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

• 链接
• 2 评论
• 更多

2

Humphry 5.5k 6月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弄一份回来慢慢啃）。