WEB中文字体应用指南

所属分类: 网页制作 / 应用技巧 阅读数: 734
收藏 0 赞 0 分享
在 Web 上应用字体是一项基本技术,同时也是一门艺术。对于英文字体来说可选择的范围实在是太广泛了,合理的使用它们将会为你的网站增色不少。

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

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

  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

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

  对于英文字符,首先查找Helvetica(Mac),然后查找Tahoma(Win),都找不到就用Arial(Mac&Win);若是以上三者都缺失,则使用当前默认的sans-serif字体(操作系统或浏览器指定);

  对于中文字体,我们已经了解其规则了。华文细黑(Mac),微软雅黑(Win)是这两个平台的默认中文字体。

  注意向下兼容

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

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

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

  其他

  不加双引号可以吗?

  可以。有些英文字体的名称多于两个单词,因为单词中间有空格所以需要用 "" 包裹起来。中文字体很特别,按照英文的角度来看,像微软雅黑究竟算是一个词还是四个词呢?没关系,好在中文字体的名称里没有空格,所以 "" 不加也没什么大碍。

  不过,谁都不能保证在任何操作系统/浏览器环境下都是如此,若是发生了奇怪的事情,不妨加上双引号试试看。

  可以默认显示某种字体吗?比如微软雅黑

  你可能注意到了,在我们最后的字体声明里,华文细黑是默认字体(如果你的系统上安装了声明里所有的中文字体的话),为什么我要先声明 Mac 系统的字体呢?

  按理来说,大多数网站的主要目标市场还是 Windows 用户的,所以理论上这个才是合理的声明:

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

  但实际上却并非如此。在中文字体的用户群体里,很大一部分拥有 Mac 的人都同时安装了 Win 下常用的中文字体(这得归功于 Office for Mac);但极少有 Win 用户去安装 Mac 下的中文字体.

  因此,把 Mac 用字体声明在前面几乎不会对 Win 用户产生什么影响(因为他们压根没有!),倒是用来做 fallback 的黑体可能会取代微软雅黑的位置,所以更保险的做法或许是这样:

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

  但无论如何请不要把微软雅黑放在中文字体的最前面,作为史上最丑陋的中文字体之一,微软雅黑实在不是什么好的选择,请照顾一下被 Mac 宠坏的用户吧,谢谢!(仅代表个人观点)

  BTW,如果你也像我一样不喜欢呆头呆脑的微软雅黑,那就干脆把它删了吧~

  到此为止,虽然在我们的示例代码里没有包含 Linux 家族的例子,不过相信你也明白该怎么做了吧。

  一点补充

  鉴于一些人对微软雅黑的排位产生异议,我不妨把上文的解决方案再延伸一步。事实是这样子的:

  把微软雅黑放前面,会导致安装了微软雅黑字体的 Mac 用户不得不面对微软雅黑,而在 Mac 下比微软雅黑优雅得多的中文字体比比皆是;

  把 Mac 下的字体放前面,也会对 Windows 用户造成差不多的困惑,毕竟微软雅黑是 Windows 平台下显示效果最好的字体(目前为止);

  1 和 2,哪一种出现的概率更大一些?我想这是一个不需要计算就能知道的答案吧?

  但是——的确还有另外两个因素在纠结着:

  不少 Windows 用户因为各种原因关闭了 ClearType,在此情形下微软雅黑将会惨不忍睹!但是 Mac 的字体也不是好的选择,真正的胜出者?猜对了,宋体。

  绝大部分 Mac 下的黑体在 Windows 下模糊不清,而微软雅黑虽然丑但在 Mac 下至少能看。(间接体现了两个平台的字体渲染技术的差距)

  所以在实践中,真正接近”万无一失”的方案需要考虑以下几点:

  利用 UA 判断为不同的平台加载不一样的字体声明;

  除非有特别的原因,否则尽量保持正文用宋体,标题和其他可以放大些的地方用微软雅黑(针对 Windows);

  Mac 下的冬青体效果极佳,但是该字体在 Mac OS X 10.6 以前是没有的,所以谨慎考虑你的用户群体,或者使用华文黑体系列做 fallback;

  最后,我不想再和任何人争论字体的优劣,本文的目的是介绍使用方法而不是字体选择。”美”或”丑”向来都是很主观的事情,只因为我是作者,所以我免不了会有倾向性,然而我也相信你自己会有正确的判断,和我较真没有任何实际意义。

更多精彩内容其他人还在看

更受欢迎 更具创造性的深底色网页设计实例

最新的调查表示,47%的受访者首选浅底色的设计, 主要原因是基于可读性。大多数人不喜欢阅读深色背景上的亮色文字,那样眼睛容易疲劳从而导致不适的阅读体验。
收藏 0 赞 0 分享

有创意的关于我们网页页面设计

本文收集了一些“关于我们”网页页面,60个漂亮的有效果的对用户非常友好的关于我们页面的设计实例。希望你能从中获得设计灵感。
收藏 0 赞 0 分享

整洁漂亮的网页设计的4项原则

我最喜欢的设计书籍之一就是《Robin Williams Design Workshop》.它深入实际的设计理论,并且包含许多极棒的设计实例。其中一个值得关注的地方就是4项主要的设计原则,它们已经在设计中为我所用。这4项原则就是:反差, 重复, 排列, 和分类。
收藏 0 赞 0 分享

设计参考 WordPress建站成功案例

最近国外有个牛人收集了 16 个专门收集 wordpress 精彩建站案例的网站,对于每一个 wordpress 迷来说,这都是一份大礼。
收藏 0 赞 0 分享

新闻风格网站设计实例25个

杂志和新闻风格设计越来越流行了。像Wordpress之类的内容管理系统对此类网站有比较多的模板选择,可以让普通的站长或博主轻松实现一个很像新闻网站的网站。在本文中,我们将推荐25个可以为你提供灵感的杂志风格网站设计。
收藏 0 赞 0 分享

网页文字设计应该像聪明女孩穿衣服

  这世上“没有丑女人,只有懒女人”这是女人美丽圣经里的最精彩的一句话了,一个女人只要舍得花时间琢磨怎么保养,怎么打扮,总能够找到方法展现自己美丽的一面的。界面设计何尝不是如此?那就让我们来看看聪明女人的穿衣之道里有没有什么做设计可以借鉴的地方
收藏 0 赞 0 分享

怎样设计网页?怎样制作网页?

  在网页设计的认识上,许多人似乎仍停留在网页制作的高度上。认为只要用好了网页制作软件,就能搞好网页设计了。   其实网页设计是一个感性思考与理性分析相结合的复杂的过程,它的方向取决于设计的任务,它的实现依赖于网页的制作。正所谓“功夫在诗外”
收藏 0 赞 0 分享

网页可读性提高的几个方法

1. 使用对比色 (Use contrasting colours). 这里说的对比是文字的颜色和背景色的对比。这样用户可以比较容易的看清文字,减少阅读疲劳。有视力障碍的人可能看不清楚低对比度的文字。可以去Vischeck这个网站可以看看你的网站在色弱(或色盲)用户眼中的样子。
收藏 0 赞 0 分享

网页设计心得:页面布局的简单规则

·重复:在整个站点中重复实现某些页面设计风格。   重复的成分可能是某种字体、标题logo、导航菜单、页面的空白边设置、贯穿页面的特定厚度的线条等。   颜色作为重复成分也很有用:为所有标题设置某种颜色,或者在标题背后使用精细的背景。 &middo
收藏 0 赞 0 分享

网页设计人员应该注意的43个Web设计错误

这是一篇关于网站易用性的文章,作者以亲身体会讲述了43条网站设计中常犯的错误,而无疑这些错误会大大影响网站的可用性。如今网站易用性已成为一种趋势,但纵观国内的各大网站,似乎易用性并未成为设计者们广泛理解的概念, 因此希望这篇文章对大家能有作用。 1. 用户必须
收藏 0 赞 0 分享
查看更多