国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

derek_334892 / 2099人閱讀

摘要：在上面的代碼片段可以看出，要兼容性好的使用，我們同時(shí)需要格式的字體。不單止可以轉(zhuǎn)換格式同時(shí)支持中文，還可以提取字體，并且有更快的上傳和轉(zhuǎn)換速度。擁有的所有功能，并且在線即可用。

關(guān)于@font-face

@font-face是CSS3中的一個(gè)模塊，使用 @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 */
    
    /* 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，我們同時(shí)需要 eot 、woff、ttf、svg 格式的字體。常用的工具是 fontsquirrel，一個(gè)字體生成器，可以在線生成 eot 、woff、ttf、svg 格式的字體，相信很多前端用過，具體用法可以官網(wǎng)試試。

Fontmin

第一個(gè)純 JavaScript 字體子集化方案，一個(gè)百度出品的優(yōu)秀工具。
Fontmin 有什么用呢？

提供了?ttf子集化，eot/woff/svg格式轉(zhuǎn)換，css生成 等功能，助推 webfont 發(fā)展，提升網(wǎng)頁文字體驗(yàn)。

上面是官方的說法，通俗地理解有3個(gè)作用：

提取部分字體

轉(zhuǎn)換字體格式

生成 webfont 和對(duì)應(yīng) CSS 樣式

Fontmin 應(yīng)用場景

有時(shí)候，我們想給網(wǎng)站的 Logo 、 Slogan 、標(biāo)題、活動(dòng)頁等的中文自定義字體，我們可以使用 @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:  }
});

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

基于 Fontmin 的工具

fontmin-app - Fontmin 桌面版 App，需下載安裝使用

gulp-fontmin - Fontmin 的 Gulp 插件

font-spider - 自動(dòng)分析頁面使用的 WebFont 并進(jìn)行按需壓縮

Web-fontmin

好吧，扯了這么多，終于到文章的主題。

Web-fontmin 不是什么高大上的東西，一個(gè)基于 Fontmin 構(gòu)建的字體工具，它的用處只有兩個(gè)：

提取字體

字體格式轉(zhuǎn)換

通俗的理解，Web-fontmin 是一個(gè)這樣的工具：Squirrel + fontmin-app，他是兩者的結(jié)合體。

Squirrel 只有單純的生成不同格式的webfont，且不支持中文。Web-fontmin不單止可以轉(zhuǎn)換格式同時(shí)支持中文，還可以提取字體，并且有更快的上傳和轉(zhuǎn)換速度。

Fontmin-app 主要作用是提取字體，需要下載安裝，且不支持Linux。Web-Fontmin 擁有Fontmin-app的所有功能，并且在線即可用。

使用Web-fontmin：http://fontmin.forsigner.com/

Github 地址：web-fontmin

網(wǎng)頁效果：


常用免費(fèi)字體網(wǎng)站

推薦幾個(gè)常用的字體下載王章：

Google fonts

Dafont

Typekit

博客原文：http://forsigner.com/2016/03/13/web-fontmin/

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/115123.html

相關(guān)文章

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

    摘要：在上面的代碼片段可以看出，要兼容性好的使用，我們同時(shí)需要格式的字體。不單止可以轉(zhuǎn)換格式同時(shí)支持中文，還可以提取字體，并且有更快的上傳和轉(zhuǎn)換速度。擁有的所有功能，并且在線即可用。 關(guān)于@font-face @font-face是CSS3中的一個(gè)模塊，使用 @font-face 可以自定義網(wǎng)頁字體，即使用戶的電腦沒有安裝某種字體。怎么用 @font-face 呢？你可能見過類似下面的代碼片...

    ephererid 評(píng)論0 收藏1

  • SimpleMDE編輯器 + 提取HTML + 美化輸出

    摘要：不過的縮進(jìn)，是個(gè)無情的痛，會(huì)呼吸的痛。使用方法在輸出的地方加上的類即可下面的代碼是給編輯器預(yù)覽輸出的容器加的。 這幾天在幫公司內(nèi)部弄編輯器，之前是用wangEditor富文本編輯器的，也不能說別人插件不好什么的，畢竟我是寫不出來的。不過wangEditor的縮進(jìn)，是個(gè)無情的痛，會(huì)呼吸的痛。因此我找到了一款好用的markown編輯器——simpleMDE 可能你會(huì)跟我說，喲？那Edit...

    elliott_hu 評(píng)論0 收藏0

  • 博客引入漂亮字體二三事

    摘要：火狐推遲對(duì)字體的支持，重點(diǎn)放在格式上。網(wǎng)絡(luò)字體的效率字體文件的體積可能非常的大尤其是對(duì)于漢字，而且需要額外的連接，這些都會(huì)降低網(wǎng)站頁面的加載速度。 最近興致上來，就想更換了那Blog標(biāo)題字體(漢字的)；網(wǎng)上搜索了一番，發(fā)現(xiàn)蘇新詩柳繁體這款甚合我心；然后就著手搞將了起來，分分鐘也算是替換了；但，這僅僅是此次折騰的開始；這就細(xì)細(xì)道來作為學(xué)習(xí)筆記記載。 原文首發(fā)鏈接http://www.je...

    Pocher 評(píng)論0 收藏0

  • 博客引入漂亮字體二三事

    摘要：火狐推遲對(duì)字體的支持，重點(diǎn)放在格式上。網(wǎng)絡(luò)字體的效率字體文件的體積可能非常的大尤其是對(duì)于漢字，而且需要額外的連接，這些都會(huì)降低網(wǎng)站頁面的加載速度。 最近興致上來，就想更換了那Blog標(biāo)題字體(漢字的)；網(wǎng)上搜索了一番，發(fā)現(xiàn)蘇新詩柳繁體這款甚合我心；然后就著手搞將了起來，分分鐘也算是替換了；但，這僅僅是此次折騰的開始；這就細(xì)細(xì)道來作為學(xué)習(xí)筆記記載。 原文首發(fā)鏈接http://www.je...

    Michael_Lin 評(píng)論0 收藏0

  • 非常實(shí)用的在線工具網(wǎng)站清單

    摘要：文章目錄在線圖片壓縮在線壓縮最好用的切圖工具在線工具一鍵摳圖免費(fèi)字體免費(fèi)素材圖片和視頻中國風(fēng)配色網(wǎng)站免費(fèi)壁紙免費(fèi)短連接在線在線代碼編輯在線流程圖思維導(dǎo)圖在線圖片壓縮傳送門在線圖片壓縮網(wǎng)站已經(jīng)優(yōu)化超過十億張圖片，支持，，等格式的圖片的壓縮。 ...

    XanaHopper 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<