Web引用中文個性字體

EdwardUp 發布于2019-08-02 16:01 / 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 2019-08-30 14:13 評論0 收藏0
博客引入漂亮字體二三事

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

Pocher 2019-08-19 17:37 評論0 收藏0
博客引入漂亮字體二三事

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

Michael_Lin 2019-08-30 12:47 評論0 收藏0
PDF文件預覽項目選型

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

Scott 2019-08-14 15:16 評論0 收藏0