调用外部字体

最新推荐文章于 2025-06-15 13:08:43 发布

weixin_34293902

最新推荐文章于 2025-06-15 13:08:43 发布

阅读量118

点赞数

CC 4.0 BY-SA版权

文章标签：移动开发

原文链接：http://www.cnblogs.com/icolor/p/3821989.html

本文介绍了如何根据不同浏览器选择合适的字体文件格式，并通过@font-face规则进行声明，以实现跨浏览器的字体适配。文中详细列举了Chrome、Firefox、Opera及IE等主流浏览器所支持的字体格式。

1、下载字体文件，不同浏览器使用不同字体文件格式（

Chrome：除webkit支持的以外，从Chrome 6开始，开始支持woff格式；

Firefox：支持.ttf和.otf，从Firefox 3.6开始支持woff格式；

Opera：支持.ttf、.otf、.svg。

IE：只支持eot格式，IE9开始支持woff。

）

2、声明字体如：

  @ font-face{ 
             font-family: 'socials-icons';
             src: url('socials-icons.eot'); /* IE9*/
             src: url('socials-icons.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                  url('socials-icons.woff') format('woff'), 
                  url('socials-icons.svg#socials-icons') format('svf');/*chrome/firefox*/
                  url('socials-icons.ttf') format('truetype'),/*chrome/firefox/opera/android*/
                 }
3、在需要使用该字体的元素上使用。

欢迎访问我们公司的官方网站 徐州思华科技有限公司  www.sihuakeji.com

转载于:https://www.cnblogs.com/icolor/p/3821989.html