当前位置: 首页 > Web前端 > CSS

设计师的春天:中文WebFont解决方案Font-Spider(字蜘蛛)

时间:2023-03-30 19:08:42 CSS

在我们的日常需求中,经常会遇到视觉设计师硬要某种中文字体效果的情况,因为页面高不高,字体的选择是一个重要的因素,选择合适的字体可以让页面更加优雅。面对这类问题,我们通常会采用以下方式来还原设计:使用图片背景还原设计,即使用photoshop将文字图层单独导出为网页背景图片。由此产生的问题的制造和维护成本很高。切图麻烦,高清画面适配麻烦,合并精灵图片比较麻烦,后期剪辑比较麻烦。用户体验差。因此,该网页不支持选择、复制、搜索、翻译和矢量缩放,也会影响视障用户使用屏幕阅读器操作该网页。带来更多的带宽消耗。导出图片的大小随着文本区域的增加而增大,字形无法复用,消耗大量服务器资源。WebFont技术提供了在网页上使用特殊字体的可能,从而避免了使用图像的方法。它是通过CSS的@font-face引入字体来实现的。很多互联网公司都率先采用了这种方式。比如苹果官网就使用自己的字体。谷歌也推出了免费的WebFont云托管服务,国外网站的自定义字体也得到了很好的使用。在中文方面,自定义字体已经很久没有被广泛使用了。这是什么原因?中文WebFont的困境:中文字体体积大,英文字体由26个字母组成,字体文件通常不会太大;汉字总数约9万个,国标(国标)字库有6763个字,据《现代汉语常用字表》统计,常用汉字约3500个。中文字体文件的大小通常为数兆字节。参考目前中文网络环境,显然不适合在项目中使用。浏览器支持不同的浏览器支持不同的字体。没有一种字体可以支持所有的浏览器,这就需要我们针对不同的浏览器制作不同的字体。(N=Notsupported,P=Partialsupport,Y=Supported)鉴于以上问题,我们可以得出结论,ChineseWebFont需要解决的问题是:压缩和转码。Font-Spider的中文WebFont解决方案的诞生:为了不让工程和经验限制设计师的字体选择和创意实现,我们利用业余时间解决了中文WebFont的两大难题,即压缩和转码,所以我们有字体蜘蛛的诞生。作为业界首款中文WebFont本地自动压缩转码工具,轻松解决网页中文字体问题。是一款利用自动化技术对跨平台中文字体进行压缩转码的网页字体工具,让在网页中自由嵌入中文字体成为可能。原理抓取本地html文档,分析所有css语句,记录@font-face语句声明的字体,记录使用该字体的css选择器通过css选择器的规则找到当前html文档的节点,记录节点上的文本找到字体文件,并将不用的字符编码删除为跨平台使用的字体格式。编码零干预,不需要改变web工程师已有的编码习惯。工程师可以直接通过css@font-face和选择器来定义和应用字体。压缩转码剔除无用字符,通常将几MB的字体压缩成几十KB大小,解决中文字体过大的问题,编码成跨平台兼容的格式。主页web中文字体演示和工具使用请到主页:http://font-spider.org/项目实践2014年接到的最后一个项目需求——腾讯云解决方案改版。全新的腾讯云解决方案采用了全新的排版方式,更加简洁大方。题目的字体是Adobe和谷歌共同开发的开源字体——思源字体。面对项目中对??特殊字体的需求,很快梳理出实施方案。腾讯云在线解决方案采用了思源的专用字体。开源我们不断完善Font-Spider(字蜘蛛),回馈开源社区,希望能为中文WebFont的发展贡献一份力量,让更多的中文网站可以使用漂亮的字体。本文转载自https://isux.tencent.com/font...