WOFF2与icon字体化
来源:互联网 发布:山东地税网络申报系统 编辑:程序博客网 时间:2024/06/07 04:06
如今,各浏览器对WOFF的支持都已经比较完善了。如果长期关注字体文件,就会发现现在又多了一个WOFF2的格式。没错,就如其字面意思,就是WOFF2.0。
先简单回顾一下主要的web字体文件的格式:
.eot ,Embedded Open Type,主要用于早期版本的IE,是其专有格式,带有版权保护和压缩。
.ttf ,TrueType,在操作系统里更为常见,在web上使用的话,是为了兼容早期仅支持TTF和OTF的浏览器。由于体积比较大,还需要服务器额外压缩。
.woff ,Web Open Font Format,可以看作是ttf的再封装,加入了压缩和字体来源信息,通常比ttf小40%。也是当前web字体的主流格式。
.woff2 ,Web Open Font Format 2.0,相比woff最大的优化应该是加强了字体的压缩比。目前 支持的浏览器 只有正在互彪版本号的Chrome和Firefox。
比如同样是fontawesome,woff和woff2的文件,woff2要小25%,可见增强的压缩比对文件大小的优化立竿见影。不过再怎么优化压缩也是无法解决中文字体的~中文字体将依旧长期跟随系统。
但压缩比的提升还是有意义的,特别在icon字体化方面。将icon作为字体有很多优势,比如,矢量所以缩放不模糊,不用为高dpi的设备单独做图,作为字体可以改变颜色并且自带字体对齐属性,以及低版本IE的兼容性。相比做成图片,现在如果字体拥有更佳的压缩比,那么icon字体话就又多了一个不错的理由。
当然,字体icon也有其不利的方面,相比图片和svg,其职只能是单色的,而且维护也相对要复杂。这也是为什么其应用场景多存在于后台系统而非前端页面。比如阿里云后台,在比如近段时间改版的淘宝卖家后台,都是用来字体icon,后台系统变更频率相对要小,且界面也多以简洁为主。
那么字体icon能用在前台页面吗?当然可以,并且伴随着扁平化页面的流行和多dpi设备的泛滥,这种icon字体化的趋势更加明显。但也没有必要刻意这么去做,我一直是这么觉得的,时候到了自然就翻身了。所以维持图片的做法并非过时,反而是相当稳健的选择。
我们完全用不到fontawesome这样庞大的icon集合的,通常需要自己整理出一套自己需要的图标集合。自己绘制的话推荐AI绘制好矢量然后用一些工具自动生成即可。早期工具匮乏的时候,我们还得下载一些字体编辑软件,不过现在已经没有哪个必要,已经有很多online的字体生成工具,随意选择。
题外话,由于WOFF2格式尚且相对较新,大部分工具都不提供导出功能。为此可以选择下面的工具做相应的转换:
https://www.fontsquirrel.com/tools/webfont-generator
0 0
- WOFF2与icon字体化
- 字体icon
- FTP 字体不识别 svg/woff/woff2字体 404错误
- firefox与IE9不显示icon字体图标
- 解决Web部署 svg/woff/woff2字体 404错误
- 解决Web部署 svg/woff/woff2字体 404错误
- 解决Web部署 svg/woff/woff2字体 404错误
- 解决IIS Web部署 svg/woff/woff2字体找不到问题
- 解决Web部署 svg/woff/woff2字体 404错误
- web服务器 字体.svg/.woff/.woff2 404错误 解决方案
- 字体图标 icon font
- icon 字体配置
- icon-font字体颜色
- 使用icomoon制作icon字体
- 解决phpWeb部署 svg/woff/woff2字体 Failed to decode downloaded font
- 解决IIS部署网站引用woff/woff2/svg字体报404错误
- 在Windows Azure/IIS7环境下部署svg/woff/woff2字体,添加MIME类型
- 网站发布会svg图片不加载,在IIS服务器上部署svg/woff/woff2字体
- 【论文笔记】Fully Convolutional Networks for Semantic Segmentation
- listView 嵌套gridView android
- 使用Google官方API进行全球定位
- vi/vim查找替换方法
- 原型链图解
- WOFF2与icon字体化
- js简单判断移动端系统的方法
- Java Web 前端权限管理处理方案
- shader移植到 android 失败问题 (遇到过的)
- 大整数乘法-数组实现
- scrapy 的 item pipeline
- UE4发布exe
- 码农喝水注意了!你那累写程序小心喝水喝挂了!
- 搜索样式的设定