font-face 詳解

版權聲明：本文首發 http://asing1elife.com ，轉載請註明出處。 https://blog.csdn.net/asing1elife/article/details/82862181

@font-face 是 CSS3 的一個模塊，其主要作用是可將自定義字體嵌入到網頁中，讓網頁字體的運用不只是限定在 Web 安全字體中

更多精彩

• 更多技術博客，請移步 asing1elife’s blog

語法

1. webFontName: 引入的自定義字體名稱，將會爲指定的元素添加 font-family: webFontName
2. source: 字體路徑
3. format: 字體格式，用於幫助瀏覽器識別，truetype opentype truetype-aat embedded-opentype svg …
4. weight: 字體是否粗體
5. style: 字體樣式

@font-face {
	font-family: <webFontName>;
	src: <source> [<format>][,<source> [<format>]]*;
	[font-weight: <weight>];
	[font-style: <style>];
}

格式

1. truetype - ttf
   • Windows 和 Mac 最常見字體
   • RAW 格式，不爲任何網站優化
   • IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile Safari4.2+
2. opentype - otf
   • 原始字體格式，內置在 truetype 基礎之上
   • 提供更多功能
   • Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile Safari4.2+
3. web-open-font-format - woff
   • Web 字體最佳格式
   • 是一個開放的 truetype、opentype 壓縮版本
   • 支持元數據包的分離
   • IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+
4. embedded-opentype - eot
   • IE 專用字體
   • 可以從 truetype 創建此格式
   • IE4+
5. svg - svg
   • 基於 svg 渲染
   • Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+

@font-face {
	font-family: 'webFontName';
	src: url('webFontName.eot'); /* IE9 Compat Modes */
	src: url('webFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webFontName.woff') format('woff'), /* Modern Browsers */
		 url('webFontName.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('webFontName.svg#webFontName') format('svg'); /* Legacy iOS */
}

使用

1. 獲取自定義字體的原始文件，可前往 DaFont 下載
2. 在 Font Squirrel 將字體轉換爲兼容各瀏覽器的 Web 字體
3. 按上述兼容性語法指定 @font-face 中的字體
4. 在指定元素中調用該自定義字體