前端培训丁鹿学堂：css：网页中使用自定义字体的方法

页面上使用漂亮的特殊字体

html网页常规下会去使用系统自带的默认字体。 但是如果我们网页有特殊需求需要使用我们自己设计的字体的话，也是可以做到的。 第一步，找到我们需要的字体，选择ttf格式的。 第二步，引入字体到网页中

@font-face {
  font-family:'dinglufont'
  src: url('./fonts/xxx.ttf')
}

第三步：元素使用：

div{
  font-family:'dinglufont'
}

网络字体的兼容性

除了ttf格式的字体，还有一些格式的字体也在使用：.otf,.eot,svg,.woff

WOFF

WOFF是Web Open Font Format几个词的首字母简写。这种字体格式专门用于网上，由Mozilla联合其它几大组织共同开发。WOFF字体通常比其它字体加载的要快些，因为使用了OpenType (OTF)和TrueType (TTF)字体里的存储结构和压缩算法。这种字体格式还可以加入元信息和授权信息。这种字体格式有君临天下的趋势，因为所有的现代浏览器都开始支持这种字体格式。

SVG / SVGZ

Scalable Vector Graphics (Font). SVG是一种用矢量图格式改进的字体格式，体积上比矢量图更小，适合在手机设备上使用。只有iPhone上的Safari(4.1)之前的版本支持它。目前火狐、IE都不支持SVG字体格式。火狐推迟对SVG字体的支持，重点放在WOFF格式上。SVGZ是压缩版的SVG。

EOT

Embedded Open Type。这是微软创造的字体格式(是微软在15年前发明了网络字体@font-face)。这种格式只在IE6/IE8里使用。

OTF / TTF

OpenType Font 和 TrueType Font。部分的因为这种格式容易被复制(非法的)，这才催生了WOFF字体格式。然而，OpenType有很多独特的地方，受到很多设计者的喜爱。 不同的浏览器有支持不同的字体。fonts的兼容性写法：固定的套路： 目前主流浏览器都支持.woff格式，所以如果不考虑兼容性问题的话可以放心的使用woff字体格式。

@font-face {        
        font-family: 'fontName';        
        src: url('fontName.eot'); /* IE9 Compat Modes */        
        src: url('fontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */             
        url('fontName.woff') format('woff'), /* Modern Browsers */             
        url('fontName.ttf')  format('truetype'), /* Safari, Android, iOS */             
        url('fontName.svg#fontName') format('svg'); /* Legacy iOS */   
}

url是引用的资源路径 format是用于帮助浏览器识别字体的格式。