网站字体使用技巧

扫描二维码访问该页面

在网页上应用字体是一项基本技术，同时也是一门艺术。对于英文字体来说可选择的范围实在是太广泛了，合理的使用它们将会为你的网站增色不少。而真正的挑战在于中文字体，由于中文字体组成的特殊性导致其体积过于庞大，除了操作系统内置的字体之外，我们很难在网站上应用其他的字体。我们之前讲过，设计良好的网页对于业务的影响非常大，网页字体的使用也不例外。

字体一直都是让设计师和工程师头疼的问题。如果参与过产品的设计和开发，会发现经常有以下这种情况出现：
1. 对比视觉稿和实现出来的网页，其他地方都很完美，就字体不给力；
2. 在 Mac 上很好看，在 Windows 上丑的要死；
3. iPhone 和 Android 又不同。
为什么会出现这样的情况？真正的幕后黑手是系统。

浏览器使用哪种字体取决于
1. 你的系统安装了哪些字体（原来以为浏览器自己也会带字体，这是错误的）
2. 工程师有没有让用户去下载其他字体

所以网站上到底用什么字体非常关键，涉及到的因素也非常多，主要取决于以下几个方面
1. 你的产品要在哪个系统上运行
2. 你的产品是纯英文还是中文英文甚至还有其他国家语言

我们先来看看网页设计中文字体的使用
中易宋体：即通常被熟知为宋体、新宋体的字体。是Win最常见的字体，小字体点阵，大字体TrueType，但是大字体并不好看，所以最好别做标题。
微软雅黑：Vista之后新引入的字体，打开Cleartype之后显示效果不错，不开Cleartype发虚。
华文细黑：Mac下的默认中文。
Droid Sans和衍生的WenQuanYi Microhei：Andriod中的中文，也是Linux绝大多数发行版本的默认中文，当然也有用WenQuanyi Zenhei的，不过比较少了。

中文字体也有英文名称
很多开发者忽略了这一点：尽管我们在操作系统中常常看到宋体、微软雅黑、华文细黑这样的字体名称，但实际上这只是字体的显示名称，而不是字体文件的名称。虽然说在大多数情况下直接使用显示名称也有效，但有些用户却工作在一些很极端的情况下，这会导致你的字体声明无效。
比如说，用户安装了中文版的操作系统（这意味着系统有中文字体），但是却切换到了以英文为主要语言——这种情况在那些希望加强英语锻炼的中文用户当中是很常见的。这时候，操作系统很有可能无法按照显示名称找到正确的字体，所以我们要记住的第一件事情就是： 同时声明中文字体的字体名称（英文）和显示名称（中文），就像这样：
Font-family: SimSun, “宋体”
Font-family: “Microsoft YaHei”, “微软雅黑”
Font-family: STXihei, “华文细黑”, “Microsoft YaHei”, “微软雅黑”

如果我们网站是英文网站，应该考虑如下字体
Helvetica: 被评为设计师最爱的字体，Realist风格，简洁现代的线条，非常受到追捧。在Mac下面被认为是最佳的网页字体，在Windows下由于Hinting的原因显示很糟糕。
Arial: Helvetica的「克隆」，和Helvetica非常像，细节上比如R和G有小小差别。如果字号太小，文字太多，看起来会有些累眼。Win和Mac显示都正常。
Lucida Grande是Mac OS UI的标准字体，属于humanist风格，稍微活泼一点。Mac下的显示要比Win下好。
Verdana: 专门为了屏显而设计的字体，humanist风格，在小字号下仍可以清楚显示，但是字体细节缺失严重，最好别做标题。
Tahoma: 也是humanist风格，字体和Verdana有点像，但是略窄一些，counter略小，曾经是Windows的标准字体，Mac 10.5之后默认也有安装。
Trebuchet MS: 为微软设计的一个humanist风格字体，个人觉得个性太过突出，用得不好会不搭。

永远不要忘记声明英文字体，并且英文字体应该在中文字体之前
记住这个事实：绝大部分中文字体里包含英文字母（但是基本上都很丑），而英文字体里不包含中文字符。
在网页里中/英文混排是很常见的，你绝对不会喜欢用中文字体显示英文的效果，所以一定不要忘了先声明英文字体：
Font-family: Georgia, SimSun, “宋体”
Font-family: Arial, “Microsoft YaHei”, “微软雅黑”

最后别忘了照顾不同的操作系统
作为一个 Web 开发者，我们不仅在网站建设应注意浏览器的兼容性，还要特别关注不同的操作系统，你理应对 Windows, Mac OS, Linux 家族等常用操作系统里的系统字体有足够的了解，特别是中文。在这里，我们假设目标网站要同时给予 windows 用户和 mac 用户最好的字体体验，于是我们可以这样声明：
Font-family: Helvetica, Tahoma, Arial, STXihei, “华文细黑”, “Microsoft YaHei”, “微软雅黑”, sans-serif
这句声明都做到哪些事情呢？让我们一一说明（括号内代表其对应的目标操作系统）：
对于英文字符，首先查找Helvetica(Mac)，然后查找Tahoma(Win)，都找不到就用Arial(Mac&Win)；若是以上三者都缺失，则使用当前默认的sans-serif字体(操作系统或浏览器指定)；
对于中文字体，我们已经了解其规则了。华文细黑(Mac)，微软雅黑(Win)是这两个平台的默认中文字体。