网页字体九成手册

html5诞生以来,字体特性算是一个广受喜爱的特性,但又对于最终用户不算是太友好,毕竟前端不是专业造字人,特别是中文,所以就出现了很多基于字体的框架,软件等。

今天说一下,如果本文看完的话,基本上能解决 90% 的字体问题,所以就叫九成手册,当然你要问我IE,我就呵呵了,再说一次,html5.

图标

一:使用图标库

使用 Icon 是目前来说字体应用最为广泛的了。比较流行的框架有 glyphicons awesome 等等。

记得在不久前(就算是如今),很多网站都没有使用字体来做为图标,而是使用图片,这样会有很多缺点:

  1. 字体文件一般都比较小,包含上百个图标的字体通常不到 40kb,而使用位图,100个图标可能达到 1Mb 以上,而且网络请求 100个小图标,也是不小的开销。
  2. 当然,你也可心使用 css-sprite 技术将这100个小图标压成一幅图片,这样就只请求一次了,但编写css样式的复杂度就会变高很多,即使是用 compass,也要额外写很多。而且当你使用 sprite 图后,就没有办法进行大小控制了。
  3. 使用图片,样式不够灵活,比如放大缩小,颜色等,如果是字体,可以随便调整 font-sizecolor 等属性。
  4. 图片如果拉大后,就会失真,颗粒感强

当然图片有两点好处,目前还使用图片做为ICON的都是基于以下考虑

  1. 图片显示效果可以好一点,比如在PS里面加入各种特效后导成图片,字体就比较难做到
  2. 兼容老古董IE

一般情况下,都是使用 <span class="icon xxx" /> 之类的来放置一个图标,但也有一些框架可以直接使用文字切换,比如 Google 的 MaterialIcon 可以直接写为 <i class="material-icons">book</i>

具体怎么写参考框架就行了,不多讨论,但是即使如此,一般情况下都会受到一定的局限性,有时想要一个好的 ICON 但是图标库中没有是很觉的事。

阅读更多