【前端学习记录】@font-face规则

什么是@font-face规则

@font-face规则是规定网页上可以显示的一种特殊字体的规则。

在Windows系统中，我们可以在C:/windons/fonts中找到很多字体，这样就可以使用文件夹里面的字体。但是这样需要对应字体的文件放在该文件夹里。

在css3之前，如果用户想在网页使用特殊的字体，可以让用户在客户端安装对应的字体，或者将特殊字体做在图片里，不是很方便。

如何解决？

解决思路：在服务器端存放一个fonts文件夹，里面存放用户可能用到的字体，这样，用户用到哪种字体可以直接下载使用，而不需要安装。

利用@font-face规则，定义web字体，并引用需要字体的四种文件格式，确保能在主流浏览器中都能正常显示该字体。

字体文件后缀	适用于浏览器
.TTF 或.OTF	Firefox、Safari、Opera
.EOT	Internet Explorer 4.0+
.SVG	Chrome、IPhone
.WOFF	Chrome、Firefox

只有一种格式的字体，如何生成其他格式的字体？

打开网站 fontsquirrel，将已有的文件字体格式上传，便可生成其他的文件格式。

如何使用？

<style>
	@font-face {
	  font-family: myFont; // 定义字体的名称
	  src: url('fonts/myFont.ttf'), url('fonts/myFont.woff') // 字体来源
	}
	p {
	   font-family: myFont;
	}
</style>