css3之@font-face---再也不用被迫使用web安全字体了

1，@font-face 的出现
在没有css3之前，我们给网页设计字体只能设置web安全字体，使得我们的网页表现看上去好像都是那个样子，那么如果我们想给字体设置web设计者提供的字体呢？没有问题，css中的@font-face 就可以帮助你解决这个问题。原理是通过将字体文件存储到服务器，再需要时被自动下载到用户的计算机中，缺点：这种字体好像是收费的，可能会影响加载速度，不过在当今的网速下，为了美加载速度可以忽略不计

2，@font-face 的使用
@font-face 这个属性怎么使用呢？也就是它的语法是什么？看下图

aaarticlea/png;base64,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" alt="" />

从上面的语法中，可以看出@font-face最少需要两个参数，一个是你给你所添加字体的名字，比如方正黑体，一个是服务器字体的url，下面的一些设置大多可以不用，因为可以用其他css属性就搞定了，效果比这个也好。

@font-face{
		font-family: abc;		/* 定义字体名字 */
		src: url('abc.TTF');
	}
	html {font-family: abc}; // 将你的文档设置为你注册的字体

这样你就达到了使用你想用的字体

3，兼容性呢？（浏览器支持）

Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。

Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。

IE8 及更早版本不支持 @font-face 属性

对于兼容性，在测试中，实在不能分辨用那种类型的字体，但是在标准浏览器中，我使用的ttf类型字体，可以显示出它的样式，在ie9 +下面效果不是很好，有点乱，以后再接着总结，但是发现了一个可以生成字体的网站，在下面的推荐网站中会有，这里就不显示了

参考文章：

css3 @font-face