β

font-family总结

SILENT RIVER 83 阅读

这确实是个不太好说清楚的问题,以至于平时工作的时候总会可以的去回避这个问题,或者是从别的地方CtrlC一下草草了事,至于为什么,谁在乎呢。

周么没事做还是来理一理吧。

你有没有想过,为什么会有好多人为了设计一款字体花费数年甚至数十年的心血呢?

文章最终是传达信息的工具,而这远不仅仅是文字本身的「字面意思」,一款字体的选择很大成度上决定了一副作品的气质和可读性。好的字体设计应该能在两者之间达到一种平衡。比如政府文件中常用的仿宋体,基本上看到这个字体甚至不用看内容你就能知道这大概是个什么东西了。好像跑题了。。。

言归正传,我已经选择好了一款高大上的字体,那么怎么样才能保证网页在所有用户看来都是一个效果呢?很抱歉答案是几乎做不到。网页渲染是选择哪一种字体是由css的font-family属性决定的,拿本站来说(就是你现在看到的样式):

article{
  font-family: Georgia,"Times New Roman",Times,"Songti SC","SimSun",serif;
}

如你所见,font-family中有一票儿的字体,网页渲染的时候浏览器会按照依次检查这些字体,找到了就用找不到就下一个。找到的意思就是你的系统上安装了这个字体,反之亦然。需要考虑以下因素:

  1. 操作系统
  2. 操作系统版本
  3. 浏览器默认字体
  4. 中英文字体

一言蔽之,每个操作系统的每个版本上的针对中英文的预装字体是不同的。另外一些浏览器允许用户设定「保底」的默认字体,比如Firefox。分析上面的css代码:

  1. 首先是针对西文字符(a-zA-Z0-9 及其他的特殊符号)的Georgia,"Times New Roman",Times
  2. 然后是针对中文字符的"Songti SC","SimSun"
  3. 最后为了保证最大限度的兼容性又定义了字体族属性serif

以上serif意思是 衬线字体族,与之对应的是 sans-serif 非衬线字体族,另外还有常用与代码显示的 monospace 等宽字体族。具体字型可以参考 这里

其实上面有意回避了如何面对各种操作系统的不同预装字体的问题,因为这几乎是个理不清的问题,国内大多数网站用字差不多也是处于一种放任自流的方式。意思就是系统默认是什么字体就显示成什么字体,你丑你活该,谁让你用XXX系统来着。

就算代码写的天花乱坠,大部分用户看到的还是默认字体。

然后就有人实在看不下去了——「老子费尽心思设计的高大上页面到用户那里就变成了一坨shi」,于是 font-face 诞生了。简单来说就是在用到某种字体之前先从网上下载之,这样就能不管用户系统上有没有这种字体都能正常显示了。随心所欲,幸福就这么简单。

你注意到本站的导航用了一种特殊的英文字体了吗?上代码:

@font-face {
  font-family: 'PT Sans Narrow';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans Narrow'), 
       local('PTSans-Narrow'), 
       url(../fonts/PTSansNarrow400.eot), /*ie9*/
       url(../fonts/PTSansNarrow400.eot?#iefix) format('embedded-opentype'), /*ie6-8*/
       url(../fonts/PTSansNarrow400.woff) format('woff');/*modern browser*/
}

首先自定义一种字体名称 PT Sans Narrow
一般可以在 Google CDN上引用字体,不过由于GFW的原因,国内使用经常抽风,会严重拖慢网站速度。我的做法是把用到字体下载下来直接放到了「本地」目录下面。
不幸的事,这种用法依然逃不出兼容性的坑。由于不同的浏览器所支持的字体格式各不相同,呐,就是上面的.eot.woff等等。其实这里我偷了个懒,其他还有.ttf.svg格式。你可以在 这里 进行各种字体格式的转换,然后下载下来就行了。

总结:
不完善的标准、日新月异的技术变更、层出不穷的设备还有各种奇葩浏览器。让前端变成了一个到处是坑的,这里没有绝对的解决方案,只有合理的兼容与取舍。

在不完善中做到完善,这本身就是件很有趣的事。

font-family总结 was originally published by ZhaoMiing at SILENT RIVER on June 14, 2014.

作者:SILENT RIVER
原文地址:font-family总结, 感谢原作者分享。

发表评论