css引入字体@font-face的兼容问题怎样处理?
发布时间：2022-01-12 08:11:22 所属栏目：语言 来源：互联网
导读：在做网页的时候，我们使用@font-face来引入字体是非常方便的。但是通过@font-face引入字体时，兼容问题是需要考虑的，因为不同浏览器的兼容效果是不同的，那么对此我们要怎样解决兼容的问题呢？下面我们来具体的了解一下。 注意： 支持 @font-face 的浏览器
|
在做网页的时候，我们使用@font-face来引入字体是非常方便的。但是通过@font-face引入字体时，兼容问题是需要考虑的，因为不同浏览器的兼容效果是不同的，那么对此我们要怎样解决兼容的问题呢？下面我们来具体的了解一下。 注意： 支持 @font-face 的浏览器有Internet Explorer 9、Firefox Opera、Chrome和Safari，另外IE9只支持.eot类型的字体，Firefox、Chrome、Safari、和Opera支持.ttf、.otf 两种类型字体。 常规用法： @font-face { font-family: 'myFirstFont';//定义该字体名称，后面要使用该字体时，使用该名称 src: url('YourWebFontName.ttf'), url('YourWebFontName.eot'); /* IE9 */ } h1 {font-family:'myFirstFont';} 兼容性写法 @font-face { font-family: 'myFirstFont'; src: url('YourWebFontName.eot'); /* IE9 Compat Modes */ src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('YourWebFontName.woff') format('woff'), /* Modern Browsers */ url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */ url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */ } 不同的浏览器支持的字体格式不同，以目前主流浏览器为参考，使用 @font-face 至少需要.woff、.eot、.SVG三种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。 .TTF、.OTF - 适用于Firefox 3.5、Safari、Opera； .EOT - 适用于Internet Explorer 4.0+； .SVG - 适用于Chrome、IPhone 获取要使用字体的三种文件格式，确保能在主流浏览器中都能正常显示该字体。 扩展：字体路径 local 表示本机地址， url 表示网址（url路径的字体，网页加载时，会自动在服务器上下载字体，因此如果字体文件太大，网页加载会比较慢） 如代码 @font-face { font-family: 'myFirstFont'; src: url('YourWebFontName.eot')，local('YourFontName.eot'); } （编辑：威海站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
