資訊專欄INFORMATION COLUMN
摘要：最近在前端開發(fā)時，因為設(shè)計的原因，要引用一些特殊字體格式，但是后來發(fā)現(xiàn)這些字體文件非常大，平均每個要左右，嚴重影響了網(wǎng)頁效率。
最近在前端開發(fā)時，因為設(shè)計的原因，要引用一些特殊字體（otf格式），但是后來發(fā)現(xiàn)這些字體文件非常大，平均每個要8mb左右，嚴重影響了網(wǎng)頁效率。經(jīng)過一番搜索，發(fā)現(xiàn)了前端字體壓縮工具（只支持utf-8格式）font-spider.
font-spider介紹具體介紹可以查看，http://font-spider.org/index....
安裝先安裝好 NodeJS，然后執(zhí)行：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格式字體，如果是其他類型的，可以在線轉(zhuǎn)換https://www.fontke.com/tool/c...
運行 font-spider ./demo/*.html命令
然后就能發(fā)現(xiàn)，壓縮好的字體都很小，只有幾k
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115865.html
摘要：最近在前端開發(fā)時，因為設(shè)計的原因，要引用一些特殊字體格式，但是后來發(fā)現(xiàn)這些字體文件非常大，平均每個要左右，嚴重影響了網(wǎng)頁效率。 最近在前端開發(fā)時，因為設(shè)計的原因，要引用一些特殊字體（otf格式），但是后來發(fā)現(xiàn)這些字體文件非常大，平均每個要8mb左右，嚴重影響了網(wǎng)頁效率。經(jīng)過一番搜索，發(fā)現(xiàn)了前端字體壓縮工具（只支持utf-8格式）font-spider. font-spider介紹 具體...
摘要：火狐推遲對字體的支持，重點放在格式上。網(wǎng)絡(luò)字體的效率字體文件的體積可能非常的大尤其是對于漢字，而且需要額外的連接，這些都會降低網(wǎng)站頁面的加載速度。 最近興致上來，就想更換了那Blog標題字體(漢字的)；網(wǎng)上搜索了一番，發(fā)現(xiàn)蘇新詩柳繁體這款甚合我心；然后就著手搞將了起來，分分鐘也算是替換了；但，這僅僅是此次折騰的開始；這就細細道來作為學習筆記記載。 原文首發(fā)鏈接http://www.je...
摘要：火狐推遲對字體的支持，重點放在格式上。網(wǎng)絡(luò)字體的效率字體文件的體積可能非常的大尤其是對于漢字，而且需要額外的連接，這些都會降低網(wǎng)站頁面的加載速度。 最近興致上來，就想更換了那Blog標題字體(漢字的)；網(wǎng)上搜索了一番，發(fā)現(xiàn)蘇新詩柳繁體這款甚合我心；然后就著手搞將了起來，分分鐘也算是替換了；但，這僅僅是此次折騰的開始；這就細細道來作為學習筆記記載。 原文首發(fā)鏈接http://www.je...
摘要：文件預(yù)覽項目選型文件在線預(yù)覽有多種方式，目前使用較多的有種。中文支持較好，沒有亂碼問題。在線示例中文文檔可以將轉(zhuǎn)換成，并且可以在中精確顯示原生文本包括在中的字體顏色位置，可以選擇搜索復(fù)制等，可選單文件輸出。缺點文件過大可能會出現(xiàn)瀏覽器卡死。 PDF文件預(yù)覽項目選型 PDF文件在線預(yù)覽有多種方式，目前使用較多的有3種：pdf2swf、pdf2image、pdf2html。這3種方式各有優(yōu)...
閱讀 3594·2023-04-25 14:20
閱讀 1234·2021-09-10 10:51
閱讀 1173·2019-08-30 15:53
閱讀 482·2019-08-30 15:43
閱讀 2339·2019-08-30 14:13
閱讀 2817·2019-08-30 12:45
閱讀 1227·2019-08-29 16:18
閱讀 1183·2019-08-29 16:12
