web font 字體裁剪工具

web font 字體裁剪工具

原由

ui 須要展示一些特定的字體，但直接引入字體包又過大，因而想到了裁剪字體，一開始想的使用「字蛛」但他是針對靜態網站的，並且實際他會多出許多英文的，估計是直接將源碼中存在的文字都算進去了。 後來又找到阿里的「webfont」 但他的字體有限，項目又不開源，因此本身寫了這個

嘗試

web font 在線站點

請注意，因爲這個服務器比較差，因此訪問可能比較慢，且由於服務器空間問題我會不定時的清空生成的資源，因此請不要使用這個站點生成的在線資源，若有須要應當自行佈設

目的與功能

1.裁剪字體包使其僅包含選中的字體

例如 以下圖生成的字體包僅包含 「天地無極乾坤借法」

其體積天然十分之小

2.另外能夠生成 css 直接複製可用，部署在公網即可永久訪問

例如

@font-face {

font-family: "QIJIC";
src: url("http://127.0.0.1:3000/asset/font/1584680576469/令東齊伋復刻體.eot"); /\* IE9 \*/
src: url("http://127.0.0.1:3000/asset/font/1584680576469/令東齊伋復刻體.eot?#iefix") format("embedded-opentype"), /\* IE6-IE8 \*/
url("http://127.0.0.1:3000/asset/font/1584680576469/令東齊伋復刻體.woff") format("woff"), /\* chrome, firefox \*/
url("http://127.0.0.1:3000/asset/font/1584680576469/令東齊伋復刻體.ttf") format("truetype"), /\* chrome, firefox, opera, Safari, Android, iOS 4.2+ \*/
url("http://127.0.0.1:3000/asset/font/1584680576469/令東齊伋復刻體.svg#QIJIC") format("svg"); /\* iOS 4.1- \*/
font-style: normal;
font-weight: normal;

}

3.將 ttf 的字體包放置在 ./src/font/ 目錄下天然能夠檢測到新的可用字體，無需重啓服務

4.提供 zip 的總體下載方案

提供的服務

查詢可用字體列表

生成壓縮字體包

如圖可見每一個返回的字體資源，訪問便可下載。另外在訪問該目錄下的 asset.zip 能夠直接下載所有的文件,生成的資源目錄結構見下圖

動態生成字體

請注意

只支持生成 .ttf .eot .woff .svg 這幾種格式

若是 text 參數爲空將會返回整個字體包

寫項目時遇到的問題

使用 svelte https://github.com/DeMoorJasper/parcel-plugin-svelte 經過這個插件使用 parcel 而後報 new 的錯 須要限制 編譯的版本，在package.json browserslist 字段限制一下版本就好

啓動

項目地址

2234839/web-font

npm i
npm run build
npm run start

默認的訪問地址是 http://127.0.0.1:3000

鳴謝

字體天下

fontmin

License

MIT © 崮生