`

最佳 Web 中文默认字体

 
阅读更多

最近淘宝网首页有个小小的 默认字体调整风波,中文默认字体远比我们想象中的复杂。以前主要关注 font-family 自身,忽略了 lang 属性和 charset 设置。今天做了个更详尽的测试:

http://lifesinger.github.com/lab/2011/default-fonts/

在不同操作系统下,用各个浏览器打开,特别是 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 是个恐怖的世界,不要尝试分析其规律,最后测试一下就好。

可以总结出:

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

     font-family: arial, sans-serif;

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

  1. 如果页面 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

补充:

  1. 关于字体的默认大小和行高等信息,推荐博文:默认 Web 字体样式
  2. 关于字体的 fallback 等文本渲染信息,推荐博文:浏览器如何渲染文本
分享到:
评论

相关推荐

    MacOS使用的中文字体

    用户还可以通过系统偏好设置中的“字体册”来查看和管理所有已安装的字体,包括预览、安装新字体以及设定默认字体等操作。 为了丰富用户的选择,MacOS还支持第三方字体的安装。用户可以从各种在线字体库下载喜欢的...

    jasperReport中文字体和配置.rar

    - **中文字体**:JasperReport默认使用的字体可能不包含中文字符,因此需要引入支持中文的字体库。常用的中文字体有宋体、黑体、微软雅黑等。将这些字体添加到项目中,然后在jrxml文件中通过`<font>`元素指定。例如...

    Flex 使用中文设备字体 解决办法

    它允许开发者创建具有丰富用户体验的Web应用,但其默认的字体设置可能无法满足全球化的语言需求,特别是对于中文用户。 在Flex中,我们可以使用`@font-face`规则来定义和引用外部字体。这个CSS3特性使得在Web应用中...

    [精通CSS.-.高级Web标准解决方案(第2版)中文版

    《精通CSS - 高级Web标准解决方案(第2版)》是一本深入探讨CSS技术的专业书籍,旨在帮助读者掌握Web设计中的高级技巧和最佳实践。这本书涵盖了CSS的各个方面,包括布局、选择器、定位、浮动、响应式设计、浏览器...

    FreeMarker_2.3.23 中文

    FreeMarker 是一个强大的模板引擎...总之,FreeMarker_2.3.23 中文版的资源为开发者提供了全面的学习材料,无论是初学者还是有经验的用户,都能从中受益,提升自己的技能,更好地利用FreeMarker进行高效的Web应用开发。

    msyh.rarmsyh.rarmsyh.rar

    由于Zabbix默认可能不支持某些特定的中文字体,因此在部署Zabbix时,为了适应中文环境,往往需要手动添加或替换字体文件。 首先,我们来了解Zabbix字体配置的基本步骤: 1. **字体文件上传**:将“msyh.ttf”字体...

    CSS设置网页的字体 防浏览器浏览页面字体变形

    `Arial`同样是一种常用的无衬线字体,而`Sans-serif`则是一个通用的备选方案,当上述特定字体无法加载时,浏览器会选择系统默认的无衬线字体。 **优点**: - 英文部分使用`Verdana`,中文部分使用`"宋体"`,兼顾了...

    Intellij入门手册

    IntelliJ IDEA与Eclipse的不同之处在于,IntelliJ IDEA的编译输出目录默认不在WEB-INF/classes下,而是新建一个名为"out"的目录,与源代码目录"src"平级。然而,对于Web应用,我们可以配置输出路径到WEB-INF/classes...

    CSS2.0中文手册DHTMLET-Cascading Style Sheet 2.0 中文手册

    属性定义了元素的样式属性,如颜色、字体大小等,而值则是指定给属性的具体样式信息。例如,`color:red;`设置文本颜色为红色。 **选择器的多样性** 在CSS2.0中,选择器不仅限于标签选择器,还包括类选择器、ID选择...

    gkai00mp.rar

    3. 处理中文字体:如果PDF中包含的中文字符在系统默认的字体中找不到,你可能需要找到像"gkai00mp"这样的字体文件,将其安装到系统或指定的目录,确保转换工具在创建SWF时能够访问这些字体。 4. 使用转换工具:有...

    css使用客户端没有安装的字体语法解决方案

    /* 如果用户浏览器不支持自定义字体,则使用默认的sans-serif字体 */ } ``` 在处理中文字符时,由于中文字体文件通常较大,下载可能会消耗大量时间和带宽,这可能导致页面加载速度变慢。因此,对于中文网页,一般...

    zabbix.zip

    将这个TrueType字体文件安装到系统中,然后在Zabbix配置中设置为默认字体,可以有效地解决这个问题。确保在Zabbix服务器和Web前端都应用这个字体设置,以便在所有界面中正确显示中文。 最后,`alexanderzobnin-...

    Adobe Illustrator CS4 官方简体中文帮助文档.rar

    创建Web图形的最佳做法.332切片和图像映射.335SVG338创建动画.341优化图像.344使用ADOBEILLUSTRATORCS4vii目录Web图形优化选项.348Web图形的输出设置.358 第13章:打印设置 打印文档.360打印分色.364印刷标记和...

    PD4ML的官方API说明文档和开发jar包

    6. **字体管理**:PD4ML需要知道如何渲染不同的字体,因此开发者可能需要提供额外的字体文件或配置默认字体。 **pd4ml_demo.jar** 这个jar包包含了PD4ML的示例代码,可以帮助开发者快速理解和学习如何使用PD4ML。...

    normalize-zh, Normalize.css 中文文档与源码解读.zip

    例如,它会确保段落有合适的行高和内边距,列表项的缩进是一致的,标题有不同的字体大小和权重。此外,Normalize.css还会修复一些已知的浏览器bug,比如表格单元格的垂直对齐问题,以及`<pre>`元素中的白色空间处理...

    FreeTextBox 1.6.3 中文版及源码.zip

    它支持多种格式的文本编辑,如字体、大小、颜色、对齐方式等,还支持插入图片、超链接、表格等功能。 2. **版本1.6.3**: 版本1.6.3是一个稳定版本,可能包含了一些性能优化、新功能添加以及已知问题的修复。...

    《MyEclipse 6 Java 开发中文教程》前10章

    8.13.1修改Web项目的默认设置 161 8.13.2给Web项目加入高级功能 162 8.14 常见问题 163 8.15 小结 163 8.16 参考资料 164 相关网页 164 Tomcat JSP Web 开发中的乱码问题小结 164 第九章 开发Struts 1.x应用 166 9.1...

    authorware6.5

    这通常是因为软件默认的编码设置不支持中文字符,导致中文显示乱码或无法正常读取中文文件。解决方法之一是更改系统的语言设置,将默认语言调整为英文,但这可能会影响到其他中文应用程序的使用。另一种更推荐的做法...

    brackets-simsun:从 code.google.compbrackets-simsun 自动导出

    "Brackets-Simsun"通过JavaScript代码动态修改了Brackets的样式设置,将默认字体替换为宋体。 在实际使用中,用户需要下载名为"brackets-simsun-master"的压缩包,解压后,将扩展文件夹导入到Brackets的扩展管理...

Global site tag (gtag.js) - Google Analytics