个回答

• 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
  

  0

• SuperManSuperWorld

  2016-01-26 09:28:29

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

  0

• 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- */
  }

  
  

  1