移动终端引用字体 font-face CSS3

文章摘抄 http://www.cnblogs.com/cocowool/archive/2012/11/25/2788256.html

http://zhidao.baidu.com/link?url=k9eLR6Yqr6-jbiYDLfhz_7_HoNDmVk0i82zFZ0ot9im31rdhawDY6zb0WL0xLWZ-M_6qmV-gGnZLxmqPQLY1Vq

 

先看看font字体怎么引入的demo

@font-face { 
  font-family: SketchRockwell; /*这里是说明调用来的字体名字*/ 
  src: url(‘SketchRockwell.ttf’); /*这里是字体文件路径*/ 
} 
.my_CSS3_class { 
  font-family: SketchRockwell; /*这里设置某参数的字体值，在这里是“my_CSS3_class”调用了你刚才声明的字体值"SketchRockwell"*/ 
  font-size: 3.2em; /*这里是字体大小*/ 
} 

 

兼容性的情况，Chrome、Firefox、Opera均没有问题，IE系列不支持 .ttf 和 .otf。兼容IE需要 .eot 或者 .woff 的字体格式。

 

 

对于字体的Format，主要有以下几种字体：

 

1、TrueType（.ttf）格式。

.ttf 字体是Windows和Mac的最常见的字体，是一种RAW格式。

 

2、OpenType（.otf）格式。

.otf字体被认为是一种原始的字体格式，其内置在TrueType的基础上，提供了更多的功能。

 

3、Web Open Font Format（.woff）格式。

.woff字体是Web字体中最佳格式，是一个TrueType的压缩版本，同时也支持原数据包的分离。

 

4、Embedded Open Type（.eot）格式。

.eot字体是IE专用字体，可以从TrueType创建此格式字体。

 

5、SVG（.svg）格式。

.svg字体是基于SVG字体渲染的一种格式。

 

在工作中遇到这么一个问题，在小米手机中无法显示自定义的字体？

解决办法：

 

@font-face {font-family: "iconfont";
  src: url('../fonts/iconfont.eot'); /* IE9*/
  src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */
  url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
/*移动端字体图标*/
@font-face {font-family: "iconfont";
	src: url('../fonts/iconfont.eot');/*IE9*/
	src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
	src: url('../fonts/iconfont.woff') format('woff'); /*chrome、firefox*/
	src: url('../fonts/iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
  	src: url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}