推荐!Web中文字体应用指南 - 优设网 - UISDC

推荐!Web中文字体应用指南

2013/09/26 39587评论区

Web 中文字体应用指南

@余五四 :在 Web 上应用字体是一项基本技术,同时也是一门艺术。对于英文字体来说可选择的范围实在是太广泛了,合理的使用它们将会为你的网站增色不少。关于英文字体的使用和搭配技巧,在这里不做赘述,只推荐一套非常好的视频:Fundamentals of Design by CodeSchool

相关好文:
新手入门:选择字体的五个原则
浅析中英文基本字形的演变和发展
2012年度最佳移动网页字体设计
推荐!跨平台字体效果浅析

而真正的挑战在于中文字体,由于中文字体组成的特殊性导致其体积过于庞大,除了操作系统内置的字体之外,我们很难在网站上应用其他的字体。在可选性很差的前提之下,如何正确的使用中文字体呢?

首先,以下的字体声明都是很糟糕的,切忌使用:

Font-family: “宋体”

Font-family: “宋体”,Arial;

Font-family: Arial,”宋体”,”微软雅黑”;

Font-family: Helvetica,Arial,”华文细黑”,”微软雅黑”;

接下来,我们一步一步来说明如何定义好的字体声明。

中文字体也有英文名称

很多开发者忽略了这一点:尽管我们在操作系统中常常看到宋体、微软雅黑、华文细黑这样的字体名称,但实际上这只是字体的显示名称,而不是字体文件的名称。虽然说在大多数情况下直接使用显示名称也有效,但有些用户却工作在一些很极端的情况下,这会导致你的字体声明无效。

比如说,用户安装了中文版的操作系统(这意味着系统有中文字体),但是却切换到了以英文为主要语言——这种情况在那些希望加强英语锻炼的中文用户当中是很常见的。这时候,操作系统很有可能无法按照显示名称找到正确的字体,所以我们要记住的第一件事情就是: 同时声明中文字体的字体名称(英文)和显示名称(中文),就像这样:

Font-family: SimSun, “宋体”

Font-family: “Microsoft YaHei”, “微软雅黑”

Font-family: STXihei, “华文细黑”, “Microsoft YaHei”, “微软雅黑”

永远不要忘记声明英文字体,并且英文字体应该在中文字体之前

记住这个事实:绝大部分中文字体里包含英文字母(但是基本上都很丑),而英文字体里不包含中文字符。

在网页里中/英文混排是很常见的,你绝对不会喜欢用中文字体显示英文的效果,所以一定不要忘了先声明英文字体:

Font-family: Georgia, SimSun, “宋体”

Font-family: Arial, “Microsoft YaHei”, “微软雅黑”

另外还有一个好习惯,就是在最后补充英文字体族的名称。字体族大体上分为两类:非衬线和衬线,它们之间的区别和使用规则请见本文开始介绍的视频。一般来说,你应该这么做:

Font-family: Georgia, SimSun, “宋体”, serif

Font-family: Arial, “Microsoft YaHei”, “微软雅黑”, sans-serif

请注意:以上两句声明中的宋体微软雅黑不应该调换(尽管调换了也不会发生错误),这是因为从字体的式样来看,微软雅黑是非衬线的,而宋体才是衬线的。然而中文并不像英文那样严格区分字体族,所以这一点在实际应用当中并不那么重要。

别忘了照顾不同的操作系统

作为一个 Web 开发者,你理应对 Windows, Mac OS, Linux 家族等常用操作系统里的系统字体有足够的了解,特别是中文。在这里,我们假设目标网站要同时给予 windows 用户和 mac 用户最好的字体体验,于是我们可以这样声明:

Font-family: Helvetica, Tahoma, Arial, STXihei, “华文细黑”, “Microsoft YaHei”, “微软雅黑”, sans-serif

这句声明都做到哪些事情呢?让我们一一说明(括号内代表其对应的目标操作系统):

  1. 对于英文字符,首先查找Helvetica(Mac),然后查找Tahoma(Win),都找不到就用Arial(Mac&Win);若是以上三者都缺失,则使用当前默认的sans-serif字体(操作系统或浏览器指定);
  2. 对于中文字体,我们已经了解其规则了。华文细黑(Mac),微软雅黑(Win)是这两个平台的默认中文字体。

注意向下兼容

到此为止,我们的字体声明已经很不错了——如果你不必考虑还在使用旧版本操作系统的用户的话。遗憾地是,中文市场还有大量的用户在使用 Windows XP,宋体才是他们的主要中文字体。为了照顾到这些用户,你可以为微软雅黑增加一个 fallback:

font-family: Helvetica, Tahoma, Arial, STXihei, “华文细黑”, Heiti, “黑体”, “Microsoft YaHei”, “微软雅黑”, SimSun, “宋体”, sans-serif

同样地,你看到我们也为 Mac 系统使用了黑体作为 fallback。

其他

不加双引号可以吗?

可以。有些英文字体的名称多