字体, Web设计中一个最关键的元素

cover-image

看了很多网站, 个人觉得字体的设计对于一个网站整体面貌的影响, 是巨大的.

但是字体设计, 这个东西应该属于贯穿网页设计到前端开发者的一个难题. 好的字体排版, 可以让人耐心的看完长段的文字内容, 而糟糕的设计, 甚至会影响到阅读者的心情.

废话不多说, 直接上干货.

##字体分类

  • 衬线体(serif)

宋体就是一种典型的衬线体

宋体

  • 非衬线体(sans-serif)

非衬线体中最典型的就是微软雅黑

雅黑

不要问我到底这两个有什么区别! 我个人认为非衬线体更适合在电子屏幕上显示, 感觉也更舒服.

##字体的选择

如何在网页中选用最合适的字体呢? 也许这个是UI设计师需要考虑的问题, 但是我从前端的角度来说说.

首先是不应该使用华而不实的字体. 文字是人类用来表达某种含义的工具, 如果一个文字不能被正确的识别, 那它的意义也没有了. 但是其实浏览器对于字体的选择, 不是仅仅一条CSS font-family就万事大吉了的, 第一就是用户的系统中需要有那个字体, 如果没有需要的字体, 那就只能使用默认的字体, 额外需要注意的一点是, 不同的系统比如xp, win8, OS X, android, 它们的自带系统字体并不是完全相同的, 这更给页面适配带来了难点. 这点, 设计师应该尤其注意, 少量的非系统自带字体比如Logo, 可以用图片代替, 但是大量的图片使用会带来大量额外的 HTTP 传输开销, 这应该是被避免的.

###使用多个字体属性来兼容

font-family 属性可以指定多个字体值, 如果前面的字体找不到, 则依次往后查找. 但是这个字体也不是随便写的, 也要按照一定的规范来, 顺序是 最想用的字体 >> 可以代替的相近字体 >> 相近通用字体, 中文字体 >> 英文字体.

1
2
font-family: Arial, "Hiragino Sans GB", "Microsoft YaHei",
             "WenQuanYi Micro Hei", sans-serif;

上面的意思就是, 英文字体使用Arial, 中文优先使用冬青黑, 其次雅黑, 然后是文泉驿微黑, 如果都没有就选择默认的非衬线字体.

上面这个排序来自于这里, 如何保证网页的字体在各平台都尽量显示为最高质量的黑体？, 这里还给出了不同的操作系统中显示效果最好的字体:

  • 对于 Windows：在中易宋体和微软雅黑之间二选一。粗体和较大字号的文本用微软雅黑。没有微软雅黑的系统会回退到中易宋体。
  • 对于 OS X：尽量使用冬青黑体简体中文。没有冬青黑体简体中文的系统会回退到华文黑体。
  • 对于 iOS：系统会自动使用华文黑体。
  • 对于 Linux：尽量使用文泉驿微米黑。没有文泉驿微米黑的系统会回退到别的字体。
  • 对于 Android：系统会自动使用 Droid Sans。

###使用webfont
CSS3 新增的 @font-face 属性，可以用来调用服务器上的字体，然后来渲染网页.

但是这个东西暂时只建议用在英文上, 因为一个中文字体动辄10+MB的大小, 使得打开一个网页比看一个视频还慢, 更得照顾那些手机用户, 你一个页面打开我一天的流量就超标了.

Google 提供了在线的 webfont 服务, 被墙了好一阵子, 但是听说最近几天fonts.googleapis.com这个域名已经指向北京的IP了. 国内有一个替代方案就是360公司前端的useso, 使用方式不赘述可以自行百度/谷歌.

当然中文也不是不行, 我们中国人就想出了一个相对比较完美的解决方案font-spider 字蛛, 它基于 Nodejs 通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。这个方案就对前端自动化的要求比较高, 适合比较 Geek 的团队或者个人尝试, 个人使用过一次, 效果还是很棒的.

##与字体有关的 CSS 属性
经常遇到美工的同学过来吐槽, 这个字体要细一点, 这个字要立体一点, 怎样把美工的术语转化成CSS属性呢, 来看看常用的字体属性.

  • font-family：用于定义字体
  • font-style: normal 正常、italic 斜体、oblique 倾斜。 关于后两者在FF和其他现代浏览器的区别请自行百度.
  • font-weight: 文字的粗细
  • font-size: 文字大小
  • line-height: 行间距
  • letter-spacing: 字间距
  • word-spacing：单词间距
  • text-align: 文本对齐方式
  • text-decoration: 通常用来操作文字下划线
  • -webkit-font-smoothing: antialiased: 抗锯齿, 这个属性的前缀表明了它是一个私有属性, 但是它可以改变浏览器的渲染方式, 使得字体看起来更加的平滑, 更加的细一些.

更多请参阅 CSS 参考

##字体的渲染

在不同的环境中, 字体的渲染效果是不同的.

在 OS X 下把黑色字体放大, 可以看到字体的边缘出现了彩色.

OSX字体

为什么相同的字体，在Mac OS上的显示效果「看起来」要比Windows上好看？

原因就是本段最开头那句话, 不同操作系统, 甚至不同的浏览器具有不同的渲染策略.

###黑白渲染

黑白渲染

###灰度渲染

灰度渲染

###次像素渲染

次像素渲染

看过 Zealer 王自如视频的同学都知道, LCD的单个像素通常是由 RGB 三个次像素组成的, LCD 能够单独的控制这些次像素. 所谓的次像素渲染, 就是利用了这些像素点中的某一个或几个次像素来达到平滑字体的效果.

次像素

###Windows
在 Windows 下, 次像素渲染使用的是自家的 ClearType 技术, 由于兼容性需要, windows 同时保留了 GDI 和 DirectWrite 两套图形文字渲染接口, 这两个接口同时支持 ClearType.
XP 下 ClearType 是默认被关闭的, 我记得是在桌面右击 - 属性, 字体, 选择一个下拉菜单为清晰的选项即可打开, 直到 Vista, ClearType 才被设为缺省打开.

字体渲染策略与浏览器和字体格式的关系：

字体渲染策略与浏览器和字体格式的关系

###OS X
OS X 很早就使用了字体平滑的技术, 但是 OS X 下的字体平滑在低 PPI 的显示器中会有发虚的倾向, 因为同样是次像素渲染来使字体平滑的技术, WIN/APPLE的理念是完全不同的.

苹果认为，（字体渲染）算法的目标应尽可能还原字体的设计，即使代价是造成些许模糊。

微软认为，字符的形状应和像素契合，以防止模糊，提高可读性，即便扭曲了字体的构造。

###手机

拿起你手边的手机, 用原生浏览器找一个网页打开截屏，再把图片不断放大后，你会发现手机上的字体渲染并没有使用亚像素渲染，这是为什么?

这是因为自从 Apple 推出 retina 屏的概念之后, 手机的 ppi 越来越高, 这个时候使用次像素渲染技术已经是没有必要了. 而且, 次像素渲染是要花费额外的 CPU 时间的, 带来的发热以及续航缩减问题也是厂商需要考虑的, 所以通常手机上都是使用的传统的字体渲染模式.

##参考和推荐文献

本文部分参考并引用了以下网络资料，同时也推荐以下资料：

引用部分，版权归原作者所有。