任何网页效果的问题都只是时间的问题。比如在年网页字体是这样子的:
(图片来源:NCSA/UniversityofIllinois)
这是一个现在很难有人听说过的历史上第一款可以显示图片的Web浏览器NCSAMosaic的截图,它仅包含单一的、默认的字体。从那时起在字体渲染方面浏览器不断进化以让网页不断接近设计稿,到年的今天,已经可以使用”PixelPerfect“来形容网页字体如何实现设计稿的效果。
但,这也只是在英文网页中的状况,中文字体在网页上却还只是”pixel”的还原,并没有文字的还原。网页中文很多特殊字体(非系统自带的字体)还是要使用图片来代替,这种做法其实是把Photoshop中使用了特殊字体的文字进行栅格化,浏览器显示时并没有显示文字,只是把栅格化得到的像素重现在网页上。图片上的文字,没法选择、复制、翻译,没法在页面中搜索,只是表面上的还原。
用图片代替的做法有很多时候会遇到难题,比如文字是用户动态提交到网站数据库的,需要使用特殊字体显示时得在服务器编程将用户动态提交的文字生成图片。又比如一些特殊字体的文字要做一些变形之类的动画,用图片代替实现不了,得将文字转换成SVG矢量图形做一些SVG动画。
还有一些其他问题,比如用户动态提交的文字中会包含iPhone的Emoji表情符号,要在服务器生成支持特殊字体和Emoji的文字图片会有点麻烦。当然技术人员会不断地hack下去,最终会实现所要的效果。
只是,一些问题我们应该探讨一下来源,了解一下我们正处在什么位置,看看历史和未来有助于一起改变现状。
回到最开始比如这个问题:为什么网页上不能显示Photoshop里面的某种字体呢?
我们试试从最初的浏览器开始探讨这个问题,最早的浏览器是如何支持让网页开发者控制字体的呢?
本文最开始说的年发布的NCSAMosaic就是最早的浏览器之一,是现代浏览器比如Chrome、Firefox的鼻祖。Mosaic出来时,它只能用默认字体,没法让网站开发人员指定网页使用什么字体。直到年微软发布IE浏览器、Netscape浏览器(NCSAMosaic前身)发布版本3.0,一个叫FONTFACE的属性被引入进来用于网页开发者指定字体,这时,网页上使用字体的故事真正开始了。
当时IE提供的FONTFACE的属性(link1),如下图
微软同时也指出了这一定义字体属性的问题:
TheFACEattributereliesonatleastoneofthefontsspecifiedbeinginstalledonthereader’ssystem.Ifthefirstchoiceoffontisnotpresentonthereader’s治疗白癜风的药有哪些北京有好的白癜风医院吗