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

最新推荐文章于 2025-07-31 17:01:49 发布

原创最新推荐文章于 2025-07-31 17:01:49 发布 · 514 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #学习 #javascript

前端专栏收录该内容

26 篇文章

订阅专栏

@font-face规则允许在网页上使用自定义字体，无需用户事先安装。通过在服务器端存储字体文件并引用不同格式（如TTF,OTF,EOT,SVG,WOFF），确保跨浏览器兼容性。fontsquirrel网站提供将字体转换为不同格式的服务。使用时，定义字体名称和源URL即可在CSS中应用。

什么是@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>