聊聊web字體那些事兒

如何讓web應用更加有特點，並忠誠於UI的設計思路及美感，字體一直都是重中之重，特別是對於紛繁的中文字體，要想應用好它們，就需要了解web字體的相關知識。合適的優秀的舒服的字體會讓應用更加有吸引力！但隨之帶來的加載效率性能問題也同樣需要關注，魚和熊掌不可兼得，合適，找到平衡的那一點！

1、字體格式

• ttf格式(TrueType)
  • 最常用的字體格式。由一種數學模式來進行定義的基於輪廓的字體，使得比基於矢量的字體更容易處理，效果與矢量自已一樣，保證屏幕與打印輸出的一致性，幾乎支持所有設備進行輸出。
• otf格式(OpenType)
  • 相當於ttf格式的升級版，可以說是用來代替ttf的新字型，增強的跨平臺功能，更好的支持Unicode標準定義的國際字符集，支持高級印刷控制能力。
• eot格式(Embedded Open Type)
  • 嵌入字體格式，允許 OpenType 字體嵌入到網頁並可以下載至瀏覽器渲染，這些文件只在當前頁活動的狀態下，臨時安裝在用戶的系統中。
• woff格式(Web Open Font Format)
  • 一種專門爲了 Web 而設計的字體格式標準，只是對於 ttf / otf 等字體格式的封裝，並針對網絡使用加以優化：每個字體文件中含有字體以及針對字體的元數據（Metadata），字體文件被壓縮，以便於網絡傳輸，並且不包含任何加密或者 DRM 措施。
• woff2格式(Web Open Font Format2)
  • 這個規範被開發來提供改進的壓縮從而降低網絡帶寬的使用，同時即使在移動設備上仍然允許快速解壓。與woff 1.0中使用的Flate壓縮相比，這是通過合併一個內容感知預處理步驟和改進的熵編碼來實現的。
• svg格式(Scalable Vector Graphics)
  • 可縮放矢量圖形，基於XML的，用於描述二維矢量圖形的一種圖形格式。

2、兼容性

常用的格式TTF EOT WOFF（推薦） SVG四種即可

3、字體格式轉換（工具）

• fontsquirrel
• 字客網
• Font2Web
• FontfaceGenerator
• iconfont在線字體，下載即可用
• envato這個也可以試着看下
• convertio(收費)

4、字體使用

詳解看這裏

/* 功能模塊 font-face */
@font-face {
	font-family: 'YourWebFontName';
	src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
	src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('YourWebFontName.woff2') format('woff2'),
	     url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
	     url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
	font-weight: bold;
}
body { font-family: "YourWebFontName" }
/**
 * a.src屬性定義字體的下載地址，local表示本機地址，url表示網址（比如使用服務器上下載的字體）
 * b.如果在src上定義了多種字體，它們是候選關係
 * c.如果修改了src中定義的字體或者順序，一定要關閉瀏覽器再打開才能看到修改後的效果，刷新是看不到的。
 * d.在@font-face規則中。font-family的作用是聲明字體變量，與普通選擇器中的font-family是不一樣的。
 */

5、圖標字體（iconfont、fontawesome）

記得以前沒有使用圖標字體的時候，用雪碧圖切啊，擺啊，很是痛苦，圖標字體的出現大大地方便了icon等的處理，使用方法：iconfont裏面創建項目，添加圖標，生成在線字體或者可下載至本地（可以自己用AI進行製作圖標，然後上傳形成自己的圖標庫）。

fontawesome 可以直接參考文檔進行使用即可，圖標還是蠻精緻的

6、其它

• windows下安裝TTF
  

參考資料：

1、https://blog.csdn.net/xiaolongtotop/article/details/8316554