css中如何解决引入指定字体@font-face兼容各浏览器的问题 - 行业资讯

　　介绍

这篇文章将为大家详细讲解有关css中如何解决引入指定字体@font-face兼容各浏览器的问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

网页制作中,如果想使用特定的字体可以通过<代码> @font-face 引用,即是解决访问用户电脑本地没有安装该字体导致不能按设计样式显示的问题。

注意:

支持<代码> @font-face>

常规用法:

@font-face { 　　,字体类型:& # 39;myFirstFont& # 39;;//定义该字体名称,后面要使用该字体时,使用该名称　　,src: url (& # 39; YourWebFontName.ttf& # 39;), 　　url才能(& # 39;YourWebFontName.eot& # 39;);,/*, IE9 */}, 　　　　h2 {字体类型:& # 39;myFirstFont& # 39;;}

兼容性写法

@font-face { 　　,字体类型:& # 39;myFirstFont& # 39;; 　　,src: url (& # 39; YourWebFontName.eot& # 39;);,/*, IE9 Compat Modes */,src: url (& # 39; YourWebFontName.eot ? # iefix& # 39;),格式(& # 39;embedded-opentype& # 39;),,/*, IE6-IE8 */,,,,,,,,url (& # 39; YourWebFontName.woff& # 39;),格式(& # 39;woff # 39;),,/*, Modern Browsers */,,,,,,,,url (& # 39; YourWebFontName.ttf& # 39;),,格式(& # 39;truetype # 39;),,/*, Safari,, Android, iOS */,,,,,,,,url (& # 39; YourWebFontName.svg # YourWebFontName& # 39;),格式(& # 39;svg # 39;);,/*, Legacy iOS */}

不同的浏览器支持的字体格式不同,以目前主流浏览器为参考,使用<代码> @font-face>

.TTF,。传递-适用于Firefox 3.5, Safari、Opera;
。测试结束,适用于Internet Explorer 4.0 +,
。SVG -适用于Chrome, IPhone

获取要使用字体的三种文件格式,确保能在主流浏览器中都能正常显示该字体。

扩展:字体路径

当地表示本机地址,url表示网址(url路径的字体,网页加载时,会自动在服务器上下载字体,因此如果字体文件太大,网页加载会比较慢)

如代码

@font-face { 　　字体类型:& # 39;myFirstFont& # 39;; 　　src: url (& # 39; YourWebFontName.eot& # 39;),本地(& # 39;YourFontName.eot& # 39;); 　　}

注意:

如果在src上定义了多种字体,是按顺序的候选关系,如果修改了定义的字体或顺序,需要重新打开浏览器才能看到修改后的效果,刷新是无效的。

在<代码> @font-face> 字体类型> 字体类型>

关于“css中如何解决引入指定字体@font-face兼容各浏览器的问题”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。