最近遇到一個問題,考慮到網站的性能,需要將圖標字體單獨放到一個網站引入,減少資源佔用,但是遇到一個問題,引入字體文件的時候,報跨域的錯誤。
具體解決方法:將圖標字體轉base64
轉換網址:https://transfonter.org/
按照以下三個步驟進行操作:
然後下週這個:
裏面有個:stylesheet.css 可以看到具體的引入方式:
然後修改字體引入方式:
@font-face{ font-family:my-icon; src:url(../font/iconfont.eot?v=240); src:url(../font/iconfont.eot?v=240#iefix) format('embedded-opentype'), url(../font/iconfont.svg?v=240#iconfont) format('svg'), url(../font/iconfont.woff?v=240) format('woff'),url(../font/iconfont.ttf?v=240) format('truetype') }
修改爲:
@font-face { font-family: 'my-icon'; src: url(data:font/truetype;charset=utf-8;base64,xxxx...) format('truetype'); font-weight: normal; font-style: normal; }
打完收工!