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

标签：

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

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

从上面的语法中，可以看出@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

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

标签：

原文地址：http://www.cnblogs.com/geek12/p/4674979.html