网站应该选用哪种字体？

Question

一直纠结，到底用哪个，看了看京东的arial又看了看就淘宝的tahoma，有人比较推荐arial
寻问一下大家都用啥做字体家族

Answer 1

样式表中的字体，其实应该只是一个建议，应该把最终使用哪种字体的权利交给浏览器。
所以，样式表中，字体应该用类似Arial这样的字体家族，而非"微软雅黑"这样的固定字体

推荐字体家族：Arial, sans-serif
然后再在前面放上你最想用的字体，比如"Helvetica Neue",Helvetica等。
最终变成:"Helvetica Neue",Helvetica,Arial,sans-serif

当然，网站字体选择是个非常复杂的问题，很难做到所有平台，所有浏览器兼顾。具体应用中，还应该考虑访问你网站的用户，所使用浏览器和操作系统的分布

Answer 2

在不同操作系统下，用各个浏览器打开，特别是 Firefox 和 Opera，混乱的世界啊，真真的与浏览器斗，乐趣全无！

虽然沮丧悲情愤，但分析研究的工作还是得继续：

• lang, charset 和 font-family 都会对默认字体产生影响，规律很复杂。
• 浏览器偏好里的字体设置，对默认字体有直接影响，比如 WebKit 内核的 Chrome 浏览器。
• 宋体转成 “\5b8b\4f53” 也不能通吃所有浏览器。比如在 Mac OS 的 Chrome 中，只认识 simsun.
• 宋体其实是 serif 有衬线字体，后面跟 sans-serif, 逻辑上是错的。

（修正：并没有规定前面的 font name 要和最后的 general family 保持一致）

• 不同操作系统下，各个浏览器默认的 sans-serif 中文字体，一般都是最佳选择或用户已调整为最佳，不能强制用户都用宋体。

从目前用户反馈的情况来看，在以 12px 大小为主的网页设计中，最佳的中文默认字体方案是：Windows 下用宋体，其他操作系统下用雅黑等无衬线字体。未来随着电脑屏幕的变大和分辨率的提高，当字体的默认大小提高到 14px 以上时，或许所有操作系统下，最佳中文默认字体会统一为雅黑等无衬线字体。

为了让所有网页在尽可能多的情况下，都用最佳中文字体渲染，需要特别考虑以下几点：

• 在 Mac Chrome 等环境下，用 font-family: times, sans-serif 时， 中文字体并不会根据 sans-serif 渲染，而是会根据 times 的 serif 属性， 选择默认的 serif 中文字体来渲染。 比如在 Mac Chrome 下，默认 serif 中文字体是很接近宋体的一个字体，比较难看。 （修正：实际情况更为复杂，请参考评论中的讨论）
• 在 Firefox 中，只要 font-family 中有宋体，中文必然就用宋体展现。 所以 font-family 中不能有宋体。
• 当 lang=“zh-CN”, charset=“utf-8” 时， font: arial 在 Mac Firefox 等环境下，默认中文字体是宋体。
• 在英文 Win7 下，只要 charset=“gbk”, 当 font-family 为 arial, sans-serif 时， 默认中文字体是很难看的 Microsoft Sans Serif Regular. （修正：是 fallback 到了韩文字体 Dotum/Gulim（gulim.ttc）来显示， Dotum/Gulim 没有的字符最终会 fallback 到 SimSun，暂时不知道日文字体是否夹在中间。 和 Microsoft Sans Serif 没有一点关系。）
• Opera 是个恐怖的世界，不要尝试分析其规律，最后测试一下就好。

可以总结出：

如果页面 charset 是 utf-8, 完美的默认字体方案是：

font-family: arial, sans-serif;

无论省略 lang 还是设置为 zh-CN, 在各种环境下都满足预期。

如果页面 charset 是 gbk, 推荐默认字体方案为：

font-family: arial;

Chrome OS 下未测试，根据陈成博客上的反馈， 好像会因为没有 sans-serif 而导致中文字体很难看。 不过考虑 Chrome OS 还未正式发布，目前可以先忽略。

最后，个人推荐简体中文页面的最佳实践为：

html lang=zh-CN
charset=utf-8
font-family: arial, sans-serif;

测试环境说明：

Mac OS X 10.6.7
Chrome 10.0.648.204
Firefox 4.0
Safari 5.0.4
Opera 11.01

Win7 Ultimate
IE 9.0.8080.16413

参考：http://justjavac.com/web/2012/04/13/b...

Answer 3

Answer 4

Verdana 和 Tahoma 都是比较过时的字体了，对于 Windows XP 及之后都自带了 Arial，OS X 自带 Helvetica (Neue)，比 Arial 好很多，因此我建议这样写

font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

Answer 5

中文网站，内容一般会用宋体；标题的话，就用微软雅黑。

Answer 6

XP里宋体好
WIN7/WIN8里微软雅黑好