Web-Fontmin -- 在线提取你需要的字体

JavaScript

forsigner
2016-03-14
17554 访问
2
分享
- 新浪微博
- 腾讯微博
微信分享

关于@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/