CSS中怎样引用@font-face，使用方法是什么-群英

上一篇：用CSS怎么做优惠券上的镂空效果下一篇：textarea设置autosize属性后怎么调整高度，方法是什么

这篇文章给大家分享的是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，使用方法是什么”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

标签： @font-face引用

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：用CSS怎么做优惠券上的镂空效果下一篇：textarea设置autosize属性后怎么调整高度，方法是什么