之前看过设计师面试一位 Web 前端工程师,其中有一段这样的对话:
“我会给设计师讲解工程上面临的问题,争取他理解。例如:如果文本使用图片,以新浪站点的访问量来说,这里会需要消耗大量的服务器资源,至少需要增加多台服务器,增加带宽流量消耗”。
这些年 Web 前端技术在迅猛的发展,这样的问题已经有了解决方案——WebFont,如果遇到这样的问题,现在会给出更好的答案。
WebFont 技术可以让网页使用在线字体,而无需使用图片,从而有机会解决开头设计师提到的问题。它通过 CSS 的 @font-face 语句引入在线字体,使用 CSS 选择器指定运用字体的文本,与此同时专用于 Web 展示的 woff 格式字体也得到各大浏览器厂商支持,进一步减少了字体的体积。在国外,WebFont 已经非常流行了,大量的网站使用了 WebFont 技术,而业界大佬 Google 也顺势推出的免费 WebFont 云托管服务,这一切均带动了国外字体制作行业的高速发展。
一、WebFont 的优势
相对图片,WebFont 有如下优势:
支持选中、复制支持 Ctrl+F 查找
对搜索引擎友好
支持工具翻译
支持无障碍访问,支持朗读
字体是矢量图形,支持矢量缩放,自动适配高清屏
文本修改方便
字形可以重复利用,节省网络资源