@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:  }});

詳細介紹和用法可以看這篇文章： http://efe.baidu.com/blog/fontmin-getting-started/

基于 Fontmin 的工具

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

網頁效果：

常用免費字體網站

推薦幾個常用的字體下載王章：

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com