使用在线字体有何优点和弊端？

Question

请问各位大大，怎么看在线字体的使用，你认为有什么优点弊端？

本来问题标题准备写《使用在线字体有何弊端？》的，但是考虑这样不方便大家畅所欲言，所以把优点也加进来了。想看看大家是怎么看待在线字体的。

Answer 1

你的问题也没说清楚， 不知你是把在线字体和什么比较 ， 是和“本地字库” ， 还是和“图片”比较，因为“本地字库”没啥好说的，假设你问的是与“图片”比较。

优点们：

• 显而易见的好处是更多的字体，给了设计更多选择。同时字体文件是矢量的，单纯放大缩小理论上对显示效果没有影响，我们使用CSS去约束它的尺寸总比设计完图片再改变大小要方便。值得一提的是字体文件在retina屏幕上如此完美，圆滑细腻的边线简直比图片都好看。使用字体，还可以方便用户点选文字，对搜索引擎也更友好。
• 使用在线字体去增强web显示效果，有许多在线服务提供字体CDN的，例如Google Fonts。目前集中在拉丁语系，英语为主，其它语种字型数量多，例如汉语动辄几千，一套字体文件囊括这些字型之后体积十分大，不方便在线传输，这里也有很多解决方案，例如把你要加载的文字以query形式传给后台，动态语言接到指令之后命令行调用一些开源项目，把需要的字从字库中切割出来合并成小字库传出来，不多传任何一个用不到的字符。
• 我观察最近两年web设计的一个趋势是基础框架中尽可能的少使用图片（这一点在流行的CSS框架Bootstrap 3中已经得到体现），聪明的人早就已经开始使用字体文件去代替站点里的一个个小图标，他们称作“icon font”，兼容绝大多数的终端、更快的开发速度（不用写CSS sprite了）等很多优点。具体自己看阿里的阿里iconfont和icomoon，类似站点很多。

可以分场景绕过的弊端：

• 网络开销，不过对于英文字体那极小的体积和客户端缓存来说根本没啥。
• 纯色字体对设计的限制，即便是结合CSS3的特性，也只能做到一些简单的渐变、透明度，对于色系比较多的小图标来讲，使用字体文件限制还是很大。 幸运的是最近似乎许多人对纯色渐渐情有独钟、微软的Metro风格、iOS的扁平化等等不一而足，如果设计理念类似，那么使用字体文件对设计也没什么影响。
• 在线项目都涉及到版权问题，不管你是提供还是用，最好搞清楚授权协议再去操作，尊重作者成果。

我自己非常喜欢在线字体，无论是做web还是native、无论是设计还是内容，都是非常好的补充，如果你知道该怎么用，什么时候用的话。

Answer 2

优势：

• 不再需要大量的图片来解决字体问题：Google Fonts等
• 能提供无限放大的基础图标集合

弊端：

• 对于如中文这种非拉丁语系的支持还比较蛋疼，至少目前的解决方案都无法通过静态服务器的方式解决
• 文字或图标只能是单色，不过对于现在流行的极简设计而言，大概不是什么问题

Answer 3

目前我觉得最大的弊端就是用的最多的fonts.googleapis.com的速度在国内实在不敢恭维.
一些国内网站使用了以后,导致整个网页几十秒到几分钟内就完全是空白.什么都不会显示出来.
尤其是一些本地设备也用上以后,更坑,明明瞬开的页面,那么久打不开...

其他的话,就是增加了网页的体积,可能会影响网页的速度(去掉上面提到的fonts.googleapis.com的速度影响的话.).

对于渲染速度的影响倒是不算大.

Answer 4

不是很看好在线字体……毕竟加载上代价不小。
而且中文在线字体就是个坑，因为中文字符太多，根本找不到方案一次性的全部加载。
现在的方案基本上是将你需要的几个字转化为一个特殊的库，然后你再在线加载……
icon font很棒……应该还能有更好玩的发展