Web-Fontmin -- 在線提取你須要的字體

關於@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個做用：

1. 提取部分字體

2. 轉換字體格式

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 構建的字體工具，它的用處只有兩個：

1. 提取字體

2. 字體格式轉換

通俗的理解，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/