Web-Fontmin -- 在线提取你需要的字体
2016-03-14 14:55
435 查看
关于@font-face
**@font-face**是CSS3中的一个模块,使用 @font-face 可以自定义网页字体,即使用户的电脑没有安装某种字体。怎么用 @font-face 呢?你可能见过类似下面的代码片段,它可以让 @font-face 兼容所有浏览器。@font-face { font-family: "SentyZHAO"; src: url("/fonts/SentyZHAO.eot"); /* IE9 */ src: url("/fonts/SentyZHAO.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("/fonts/SentyZHAO.woff") format("woff"), /* chrome, firefox */ /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url("/fonts/SentyZHAO.ttf") format("truetype"), url("/fonts/SentyZHAO.svg#SentyZHAO") format("svg"); /* iOS 4.1- */ font-style: normal; font-weight: normal; }
Webfont Generator - Font Squirrel
在上面的代码片段可以看出,要兼容性好的使用 @font-face,我们同时需要 eot 、woff、ttf、svg 格式的字体。常用的工具是 fontsquirrel,一个字体生成器,可以在线生成 eot 、woff、ttf、svg 格式的字体,相信很多前端用过,具体用法可以官网试试。Fontmin
第一个纯 JavaScript 字体子集化方案,一个百度出品的优秀工具。Fontmin 有什么用呢?
提供了 ttf子集化,eot/woff/svg格式转换,css生成 等功能,助推 webfont 发展,提升网页文字体验。
上面是官方的说法,通俗地理解有3个作用:
提取部分字体
转换字体格式
生成 webfont 和对应 CSS 样式
Fontmin 应用场景
有时候,我们想给网站的 Logo 、 Slogan 、标题、活动页等的中文自定义字体,我们可以使用 @font-face 引入 Web 字体,但是完整的中文字体库都是 8M 10M ,加载性能非常差,所以我们提取部分我们使用到的字体,这样可以把字体文件变成几KB。Fontmin 用法
Fontmin 的用法很简单:var Fontmin = require('fontmin'); var fontmin = new Fontmin() .src('fonts/*.ttf') .dest('build/fonts'); fontmin.run(function (err, files) { if (err) { throw err; } console.log(files[0]); // => { contents: <Buffer 00 01 00 ...> } });
详细介绍和用法可以看这篇文章: http://efe.baidu.com/blog/fontmin-getting-started/
基于 Fontmin 的工具
fontmin-app - Fontmin 桌面版 App,需下载安装使用gulp-fontmin - Fontmin 的 Gulp 插件
font-spider - 自动分析页面使用的 WebFont 并进行按需压缩
Web-fontmin
好吧,扯了这么多,终于到文章的主题。Web-fontmin 不是什么高大上的东西,一个基于 Fontmin 构建的字体工具,它的用处只有两个:
提取字体
字体格式转换
通俗的理解,Web-fontmin 是一个这样的工具:Squirrel + fontmin-app,他是两者的结合体。
Squirrel 只有单纯的生成不同格式的webfont,且不支持中文。Web-fontmin不单止可以转换格式同时支持中文,还可以提取字体,并且有更快的上传和转换速度。
Fontmin-app 主要作用是提取字体,需要下载安装,且不支持Linux。Web-Fontmin 拥有Fontmin-app的所有功能,并且在线即可用。
使用Web-fontmin:http://fontmin.forsigner.com/
Github 地址:web-fontmin
网页效果:
常用免费字体网站
推荐几个常用的字体下载王章:Google fonts
Dafont
Typekit
博客原文:http://forsigner.com/2016/03/13/web-fontmin/
相关文章推荐
- 东北赛选拔教训
- 根据给定日期判断当天是星期几
- MySql5.7 ERROR 1820 (HY000): You must SET PASSWORD before executing this statement
- Slickflow.NET 开源工作流引擎基础介绍(五) -- 会签加签高级特性介绍
- 8、redis之事务1-redis命令
- ajax与php总结
- 阿里巴巴发布《2015数据风控年报》,互联网业务黑色产业链分析
- ufw配置手册
- [转]AndroidStudio 优秀插件汇总转
- void指针的用法
- DOM对象和jQuery对象互相转换
- AAPT err(Facade for 1191041091) : No Delegate set : lost message:libpng error: Not a PNG file
- 移动应用开发必备工具盘点
- Eclispse Che(1):Centos7 安装che服务
- VS2013+OpenCV249+Windows10环境配置
- ZYNQ fsbl阶段的调试方法
- SSH整合报错:No result defined for action and result input
- Oracle批量执行SQL语句
- 持续交付的Mesos与Docker导入篇
- 曾经,美艺达见证了我们的爱情,如今,你在哪里?