前端工程师的菜姗姗来迟的中文Webfont.docx

前端工程师的菜!姗姗来迟的中文Webfont三年前,有一个设计师面试一位Web前端工程师,其中有一段这样的对话:“如果设计师希望用图片实现某个字体样式,而从技术的角度来说这样不合理,但设计师非常坚持,这时候你怎么办?”“我会给设计师讲解工程上面临的问题,争取他理解。例如:如果文本使用图片,以腾讯站点的访问量来说,这里会需要消耗大量的服务器资源,至少需要增加XXX台服务器,带宽流量消耗XXX万”。这是一段真实的面试场景,而我就是那位被面试者。这些年Web前端技术在迅猛的发展,这样的问题已经有了解决方案——WebFont,如果再回到当年面试的场景,我会给出更好的答案。WebFont技术可以让网页使用在线字体,而无需使用图片,从而有机会解决开头设计师提到的问题。它通过CSS的***@font-face语句引入在线字体,使用CSS选择器指定运用字体的文本,与此同时专用于Web展示的woff格式字体也得到各大浏览器厂商支持,进一步减少了字体的体积。在国外,WebFont已经非常流行了,大量的网站使用了WebFont技术,而业界大佬Google也顺势推出的免费WebFont云托管服务,这一切均带动了国外字体制作行业的高速发展。一、WebFont的优势相对图片,WebFont有如下优势:支持选中、复制支持Ctrl+F查找对搜索引擎友好支持工具翻译支持无障碍访问,支持朗读字体是矢量图形,支持矢量缩放,自动适配高清屏文本修改方便字形可以重复利用,节省网络资源二、中文WebFont的困境既然WebFont有如此多优势,为何中文站点依然很少采用?这里主要是三个“中国特色”造成的:1、中文字体体积英文只有26个字母,一套字体不过几十KB;而汉字却有数万个,导致字体文件通常有好几MB大小,文件体积比英文字体大数百倍,按照中国网络环境的现状,用于实际项目中显然不现实。2、浏览器类型国内浏览器市场异常繁荣,从IE6到各种壳的浏览器,他们对字体格式的支持也不一样,字体格式转换相当繁琐。3、操作系统相当长的时期内,WindowsXP操作系统是国内的主流,而XP系统对字体渲染表现差劲,设计师难以接受WebFont的表现,而宁愿使用图片。不过随着XP系统市场份额急剧下降以及移动设备的崛起,这个问题已经变得不再那么重要了。总结一下,中文WebFont首要解决的问题便是:压缩与转码。三、,即制作精简版字体,这也是我之前实践过的方案。,他们能够压缩与转码字体: (有字库)http://cn. (就是字)三、现有方案的问题在实践中,通过工具制作精简版字体异常繁琐,它需要仔细核对字符,修改非常麻烦,效率低下且容易遗漏字符而导致出错。第三方云服务最大的问题是无法保证稳定性,能否支撑海量用户访问还是个问号,至少目前这两家中文WebFont平台中还没有大型商业站点的案例,大多都是一些小型个人或企业网站在使用。四、本地自动化WebFont压缩设想出于性能以及可控性的考虑,我们排除了第三方云服务方案,尝试设计本地自动化方案。和小伙伴讨论的过程中,我们想到了之前有同事做过自动化切图的工具,原理是用脚本操作Photoshop,那么我们是否同样可以编写脚本让字体工具自动化的操作