网页CSS该用哪个中文字体

你在 网页的CSS 中有没有定义中文字体？如果定义了，你用的是哪些中文字体？你为这个问题纠结过吗？

我们纠结过，而且是相当纠结。

先看看我们现在所用的 CSS：

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

是的，根本没有定义中文字体，直接使用浏览器的默认字体。如果你没有修改过，在 Windows 7 中 Chrome 与 Firefox 安装后的默认字体都是“微软雅黑”；唯独 IE 不是，根据目前观察的情况，IE 的默认字体用的是 SimSun-ExtB（宋体）。

我们这样的 CSS 定义虽然会造成 IE 浏览器与非 IE 浏览器显示的字体不一致（IE 用户可以通过修改浏览器的默认字体解决这个问题），但这是一个情非得以的选择。

你也许会问为什么不直接在 CSS 中把字体定义为“微软雅黑”,“宋体”？这样在 Windows 系统上 IE 浏览器与非 IE 浏览器都统一用“微软雅黑”显示；非 Windows 系统（没有“微软雅黑”字体），就统一用“宋体”显示。

我们这么想过，也这么做过。但是现实很残酷。

虽然都是姓“微软“，名叫“雅黑”，但是在不同版本 Windows 上的显示效果却不一样。比如，Windows XP 与 Windows 7，一个很丑，一个很漂亮。显示效果不一样，却又用同一名字。于是，纠结就来了。

如果在 CSS 中定义第一个中文字体为“微软雅黑”，Windows XP 的用户很有意见（“微软雅黑”在 XP 中的确很丑）；如果定义为“宋体”，Windows 7 的用户又不答应（“微软雅黑” 在 Win 7 中的确比“宋体”好看）。

如果 Windows 7 与 Windows XP 中的“微软雅黑”使用不同的名字，就不会有这个纠结的问题。比如 Windows 7 中叫“微软雅黑2”，CSS 可以这样写：

body { font-family: Verdana,Arial,Helvetica,微软雅黑2,宋体,sans-serif; }

这样的话，Windows 7 中的浏览器会用“微软雅黑2”字体进行显示。Windows XP 中由于没有这个名字的字体，就用“宋体”显示，多好。

面对这样的纠结问题，目前折衷的办法就是本文开头的 CSS 定义，不定义中文字体，使用浏览器的默认字体。这样至少 Chrome 与 Firefox 没问题，高级一点的 IE 用户也没有问题。对于其他的 IE 用户，与其让他们去改 IE 的默认字体，还不如让他们换浏览器。

你也许会说，我一点不纠结，我觉得在 Windows 7 中用 IE 的默认字体（宋体）挺好。微软才不会让你这么舒服呢。

根据园友 Learning hard 的反馈，我们发现，如果 CSS 中没定义中文字体，而且 IE 用的是默认宋体，那么在文本框中输入文字时，如果通过键盘上的箭头向后移动光标，光标会突然消失。。。虽然不纠结，但你会很郁闷。

希望这个纠结只是因为 Web 前端知识的缺乏，如果你有很好的解决方法，期待你的分享！

评论加载中... 内容： 评论者： 验证码：