Web開發中常常需要使用到特殊的字體來美化頁面。一些常見的字體如微軟雅黑、小楷、華文行楷等都是操作系統自帶的,但有時我們需要使用一些特殊的字體,這時就需要使用第三方字體包了。
@font-face { font-family: 'myFont'; src: url('myFont.eot'); /* IE9 Compat Modes */ src: url('myFont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('myFont.woff2') format('woff2'), /* Super Modern Browsers */ url('myFont.woff') format('woff'), /* Pretty Modern Browsers */ url('myFont.ttf') format('truetype'), /* Safari, Android, iOS */ url('myFont.svg#svgFontName') format('svg'); /* Legacy iOS */ font-weight: normal; font-style: normal; }
以上代碼是引用第三方字體包的標準寫法。其中“font-family”屬性指定字體包的名稱,“src”屬性指定字體包在不同設備上的引用路徑,“font-weight”和“font-style”屬性分別用來規定字形的粗細和風格。
使用引入的第三方字體包只需要在CSS樣式中將字體名設置為引用的字體包名即可。
p { font-family: 'myFont'; }
需要注意的是,引用第三方字體包會增加網頁的加載時間,因此應該謹慎使用。
上一篇css第一個類