最近遇到了一個問題,使用 CSS 自定義字體時,只支持.eot格式,而不支持其他格式,如.ttf、.woff、.svg等。這讓我陷入了一些困惑,因為我需要使用這些格式,以便支持更多的設備。
我首先想到的是檢查瀏覽器是否支持這些格式,但不幸的是,所有瀏覽器都支持這些格式。我也試過了將不同格式的字體同時引入頁面中,但仍然只能使用.eot格式的字體,其他格式的字體都無法顯示。
最后,我找到了一種解決方案,那就是使用Font Squirrel自定義字體工具。這個工具可以將不同格式的字體文件轉換為.eot格式,并且生成兼容性良好的CSS代碼。
@font-face { font-family: 'MyCustomFont'; src: url('mycustomfont.eot'); src: url('mycustomfont.eot?#iefix') format('embedded-opentype'), url('mycustomfont.woff2') format('woff2'), url('mycustomfont.woff') format('woff'), url('mycustomfont.ttf') format('truetype'), url('mycustomfont.svg#svgMyCustomFont') format('svg'); font-weight: normal; font-style: normal; }
使用以上代碼塊中的CSS代碼,可以保證使用不同瀏覽器、不同設備時,自定義字體都能正常顯示。
上一篇css自定義字體加粗