脚本宝典收集整理的这篇文章主要介绍了css中引入指定字体@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');
}
注意：
如果在src上定义了多种字体，是按顺序的候选关系，如果修改了定义的字体或顺序，需要重新打开浏览器才能看到修改后的效果，刷新是无效的。
在 @font-face 中 font-family 的作用是声明字体变量，与普通选择器中的 font-family 是不一样的。
总结
到此这篇关于css中引入指定字体@font-face兼容各浏览器的问题的文章就介绍到这了,更多相关css 字体 @font-face内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的css中引入指定字体@font-face兼容各浏览器的问题全部内容，希望文章能够帮你解决css中引入指定字体@font-face兼容各浏览器的问题所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。