字体图标出现乱码的兼容方案

最新推荐文章于 2024-02-20 19:12:02 发布

转载最新推荐文章于 2024-02-20 19:12:02 发布 · 3.2k 阅读

网页-HTML/JS 专栏收录该内容

42 篇文章

订阅专栏

本文详细介绍了如何在不同平台和浏览器上加载图标字体的方法，包括iOS4.3+/Android2.2+以及更广泛的浏览器支持策略。通过使用@font-face规则，确保了在各种设备上都能正确显示自定义图标字体。

https://www.cnblogs.com/ecmasea/p/7162611.html

/* 只需在iOS4.3+/Android2.2+上运行的网页 */ 
@font-face { font-family: "iconfont"; src: url("iconfont.ttf") format("truetype"); } 
/* 需兼容各浏览器的网页。注意: 最后的svg没有指定format */ 
@font-face { font-family: "iconfont"; src: url("iconfont.eot"); /* IE9*/ src: url("iconfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("iconfont.woff") format("woff"), /* chrome、firefox */ url("iconfont.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url("iconfont.svg#iconfont"); /* iOS 4.1- */ }