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

資訊專欄INFORMATION COLUMN

Web引用中文個性字體

EdwardUp / 2841人閱讀

摘要:最近在前端開發時,因為設計的原因,要引用一些特殊字體格式,但是后來發現這些字體文件非常大,平均每個要左右,嚴重影響了網頁效率。

最近在前端開發時,因為設計的原因,要引用一些特殊字體(otf格式),但是后來發現這些字體文件非常大,平均每個要8mb左右,嚴重影響了網頁效率。經過一番搜索,發現了前端字體壓縮工具(只支持utf-8格式)font-spider.

font-spider介紹

具體介紹可以查看,http://font-spider.org/index....

安裝

先安裝好 NodeJS,然后執行:npm install font-spider -g

使用
/*聲明 WebFont*/
@font-face {
  font-family: "pinghei";
  src: url("../font/pinghei.eot");
  src:
    url("../font/pinghei.eot?#font-spider") format("embedded-opentype"),
    url("../font/pinghei.woff") format("woff"),
    url("../font/pinghei.ttf") format("truetype"),
    url("../font/pinghei.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

/*使用選擇器指定字體*/
.home h1, .demo > .test {
    font-family: "pinghei";
}

@font-face 中的 src 定義的 .ttf 文件必須存在,其余的格式將由工具自動生成
所以,一定要有ttf格式字體,如果是其他類型的,可以在線轉換https://www.fontke.com/tool/c...

生成字體

運行 font-spider ./demo/*.html命令

然后就能發現,壓縮好的字體都很小,只有幾k

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54527.html

相關文章

  • Web引用中文個性字體

    摘要:最近在前端開發時,因為設計的原因,要引用一些特殊字體格式,但是后來發現這些字體文件非常大,平均每個要左右,嚴重影響了網頁效率。 最近在前端開發時,因為設計的原因,要引用一些特殊字體(otf格式),但是后來發現這些字體文件非常大,平均每個要8mb左右,嚴重影響了網頁效率。經過一番搜索,發現了前端字體壓縮工具(只支持utf-8格式)font-spider. font-spider介紹 具體...

    nemo 評論0 收藏0
  • 博客引入漂亮字體二三事

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

    Pocher 評論0 收藏0
  • 博客引入漂亮字體二三事

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

    Michael_Lin 評論0 收藏0
  • PDF文件預覽項目選型

    摘要:文件預覽項目選型文件在線預覽有多種方式,目前使用較多的有種。中文支持較好,沒有亂碼問題。在線示例中文文檔可以將轉換成,并且可以在中精確顯示原生文本包括在中的字體顏色位置,可以選擇搜索復制等,可選單文件輸出。缺點文件過大可能會出現瀏覽器卡死。 PDF文件預覽項目選型 PDF文件在線預覽有多種方式,目前使用較多的有3種:pdf2swf、pdf2image、pdf2html。這3種方式各有優...

    Scott 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<