在現代網頁設計中,CSS3字體格式出現得越來越頻繁,而火狐瀏覽器在支持Web開發方面也備受認可。接下來,我們將從火狐瀏覽器中支持的CSS3字體格式入手,介紹其具體用法。
@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ }
如上代碼所示,我們通過@font-face引入原字體文件,并給字體設定合適的命名。接下來,我們通過src屬性來定義瀏覽器對字體文件的對應解析方式,以實現在各個平臺下的匹配字體解析方式。
在實際開發中,我們可以選擇靜態字體文件,或者通過在線字體解決方案實現引入。
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); body { font-family: 'Roboto', sans-serif; }
如上,我們直接通過Google Fonts提供的在線字體庫,將需要引入的字體名稱、字體文件及替代字體等一系列定義直接引用到樣式表中,便可以直接使用新設定的字體。
需要注意的是,CSS3字體格式的使用中,我們應該兼容盡可能多的瀏覽器,并盡量減少對資源的冗余加載。更多有關CSS3字體格式的用法,我們還需要經常學習及實踐。
下一篇火狐 css字體