包括使用.ttf 和CSS 的自訂字體
您想要將.ttf 字體合併到您的網頁中,但遇到困難。讓我們檢查一下您的程式碼:
@font-face {
font-family: 'oswald';
src: url('/font/oswald.regular.ttf');
}
問題出在哪裡?
僅包含 .ttf 檔案不足以實現跨瀏覽器相容性。要覆蓋多種瀏覽器,需要多種字體格式。
綜合解決方案:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
此程式碼假定您的網頁字體具有 .eot、.woff、.ttf 和 SVG 格式。像 Font Squirrel 或 Transfonter 這樣的 Web 字體產生器可以自動執行此程序。
現代方法:
現代瀏覽器喜歡.woff 字體,因此您也可以簡化程式碼:
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6 , Firefox 3.6 , IE 9 , Safari 5.1 */
url('myfont.ttf') format('truetype'); /* Chrome 4 , Firefox 3.5, Opera 10 , Safari 3—5 */
}
其他資源:
免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。
Copyright© 2022 湘ICP备2022001581号-3