tool 使用font-spider解決字體壓縮問題

時間 2019-11-10

標籤 tool 使用 font spider 解決字體壓縮問題简体版

原文原文鏈接

開發頁面時常常須要使用特殊字體，一個.ttf文件動則幾M,字體文件須要優化

css

http://font-spider.org/html

安裝好node環境後node

1.全局安裝font-spidernpm

npm install font-spider -gide

2.若是字體不全是寫在html中的,那麼寫個文件用於生成字體svg

*.ttf文件必須有，其餘格式的程序將自動生成

1) getFont.html文件函數

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>document</title>
	<style>
		@font-face {
          font-family: 'hk';
          src: url('./font/hk.eot');
          src:
            url('./font/hk.eot?#font-spider') format('embedded-opentype'),
            url('./font/hk.woff') format('woff'),
            url('./font/hk.ttf') format('truetype'),
            url('./font/hk.svg') format('svg');
          font-weight: normal;
          font-style: normal;
        }
        .myFont{font-family: 'hk';}
	</style>
</head>
<body>
	<div class="myFont">
		這裏寫須要用到的字體...
	</div>
</body>
</html>

2) 將 hk.tff文件放在同級font目錄中字體