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 +下面效果不是很好,有点乱,以后再接着总结,但是发现了一个可以生成字体的网站,在下面的推荐网站中会有,这里就不显示了
参考文章: