字体格式转换与压缩
字體格式轉換與壓縮
參考鏈接：
1.http://www.360doc.com/content/18/0925/11/17814860_789494015.shtml
2.https://blog.csdn.net/jeffasd/article/details/82769689
一、工具介紹：
1.在線轉換字體格式工具：Font Converter.org
2.壓縮工具：font-spider
3.【附】特殊字體在線生成器：花藤字體在線生成器
二、字體壓縮：
安裝
1.前提：先要安裝npm與node
2.安裝font-spider(字蛛)
3.安裝之后輸入
# font-spider看到下面的就說明安裝成功了
使用
首先要有項目中的html文件 在其外聯的css樣式中要規定字體文件
注意：
?在css中聲明webfont（字蛛似乎只支持woff ttf svg），故在使用之前可以使用格式轉換器【在工具模塊有提及】
目錄結構
>demo --------------項目文件index.html>font --------------存放字體文件夾Avenir_Next.ttf --------------文件index.html中代碼如下
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <style>/*聲明 WebFont*/@font-face {font-family: 'Avenir_Next';src: url('./font/Avenir_Next.ttf') format('truetype');font-weight: normal;font-style: normal;}/*使用選擇器指定字體*/.home h1, .demo > .test {font-family: 'Avenir_Next';} </style> <body><div class="home"><h1>ashdashdASDFGHJKLLL,hajsfgasdfgjahsdgfjhdasgjhfgjashgjdhfasdgfhj.</h1></div> </body> </html>其他兩種格式格式
src: url(’./font/Avenir_Next.woff’) format(‘woff’);
src: url(’./font/Avenir_Next.svg’) format(‘svg’);
開始壓縮
在使用fonts-spider之前先cd到目標文件目錄 就是你需要生成的新的字體文件的html目錄
或者寫全目錄
使用font-spider生成：
*是通配符 代表所有的html文件
輸入之后回車開始生成：
壓縮文件的大小由測試的測試的html中字的多少決定，我測試的比較少，所以只有11kb左右
生成完畢的字體文件會代替原來的字體文件，而原來完整的字體文件會進入到當前目錄下的一個叫.font-spider的隱藏文件中
最終目錄結構
>demo --------------項目文件index.html>font --------------存放字體文件夾Avenir_Next.ttf --------------壓縮后的字體文件>.font-spiderAvenir_Next.ttf --------------原來完整的字體文件總結
- 上一篇： 计算机辅助翻译 火云译客,中文在线翻译韩
- 下一篇： 3D建模与处理软件简介