font-face为什么有这么多地址?

来源:9-10 制作3D旋转导航综合练习题

SuperManSuperWorld

2016-01-25 09:28

url为什么有这么多? 到底怎么用啊?

http://img.mukewang.com/56a57a3c0001577610600234.jpg

写回答 关注

3回答

  • FianeHsu
    2016-03-29 10:21:26
    已采纳

    一、TureTpe(.ttf)格式:

    .ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】;

    二、OpenType(.otf)格式:

    .otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有 【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】;

    三、Web Open Font Format(.woff)格式:

    .woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】;

    四、Embedded Open Type(.eot)格式:

    .eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】;

    五、SVG(.svg)格式:

    .svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

    CSS3 @font-face

  • SuperManSuperWorld
    2016-01-26 09:28:29

    你好,url后面为什么要format ? format('embedded-opentype'), format('woff'),format('truetype'), format('svg');为什么format每次的名字都不一样? 谢谢!

  • Lewi
    2016-01-25 17:24:00

    为了兼容各种浏览器对于字体的识别。

    同时支持.woff,.ttf,.otf,.svg格式的版本将被视为完全实现该属性

    @font-face {
    	font-family: 'diyfont';
    	src: url('diyfont.eot'); /* IE9+ */
    	src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    		 url('diyfont.woff') format('woff'), /* chrome、firefox */
    		 url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    		 url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
    }


    SuperM...

    你好,url后面为什么要format ? format('embedded-opentype'), format('woff'),format('truetype'), format('svg');为什么format每次的名字都不一样? 谢谢!

    2016-01-26 09:27:26

    共 1 条回复 >

十天精通CSS3

本课程为CSS3入门教程,深刻详解CSS3知识让网页穿上绚丽装备

242555 学习 · 2623 问题

查看课程

相似问题