同福

CSS3样式表的@font-face使用方法

介绍

介绍

今天我们来说说CSS3样式表的@font-face的使用技巧,使用@font-face可以通过字体库“绘制”图标文字,这样可以在不引入图片资源的情况下,给网页增加图标元素,并且图标文字比这图片来说还可以通过样式表设置颜色和大小,最关键的是图标文字是矢量图,也就是说图标文字放大了也一样清晰。

听起来是不是很吸引人啊?那么就跟着福哥一起了解一下@font-face使用方法吧!

字体文件

通常字体文件的扩展名是ttf,旧版本的浏览器使用的字体文件的扩展名也可能是eot,这些字体文件从网上可以搜索到很多,可以根据自己的情况选择(注意版权问题)

字体库扩展名

  • ttf,truetype font

  • otf,opentype font

  • woff,web-open-font-format

  • eot,embedded-opentype

  • svg,scalable-vector-graphics