關于@font-face
@font-face是CSS3中的一個模塊构拳，使用 @font-face 可以自定義網(wǎng)頁字體，即使用戶的電腦沒有安裝某種字體。怎么用 @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 */
url("/fonts/SentyZHAO.ttf") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
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 格式的字體瞧壮，相信很多前端用過登馒，具體用法可以官網(wǎng)試試。
Fontmin
第一個純 JavaScript 字體子集化方案咆槽，一個百度出品的優(yōu)秀工具陈轿。
Fontmin 有什么用呢？
提供了 ttf子集化，eot/woff/svg格式轉(zhuǎn)換麦射，css生成 等功能蛾娶，助推 webfont 發(fā)展，提升網(wǎng)頁文字體驗潜秋。
上面是官方的說法蛔琅，通俗地理解有3個作用：
- 提取部分字體
- 轉(zhuǎn)換字體格式
- 生成 webfont 和對應 CSS 樣式
Fontmin 應用場景
有時候，我們想給網(wǎng)站的 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 構建的字體工具，它的用處只有兩個：
- 提取字體
- 字體格式轉(zhuǎn)換
通俗的理解蔚叨，Web-fontmin 是一個這樣的工具：Squirrel + fontmin-app床蜘，他是兩者的結合體。
Squirrel 只有單純的生成不同格式的webfont蔑水，且不支持中文邢锯。Web-fontmin不單止可以轉(zhuǎn)換格式同時支持中文，還可以提取字體搀别，并且有更快的上傳和轉(zhuǎn)換速度丹擎。
Fontmin-app 主要作用是提取字體，需要下載安裝歇父，且不支持Linux蒂培。Web-Fontmin 擁有Fontmin-app的所有功能，并且在線即可用榜苫。
使用Web-fontmin：http://fontmin.forsigner.com/
Github 地址：web-fontmin
網(wǎng)頁效果：
常用免費字體網(wǎng)站
推薦幾個常用的字體下載王章：
