fontsquirrel字体安装（特殊字体 @font-face）

最新推荐文章于 2025-03-25 11:06:31 发布

易de

最新推荐文章于 2025-03-25 11:06:31 发布

阅读量2.4k

点赞数 2

分类专栏：笔记

本文为博主原创，未经博主允许不得转载。如有问题，欢迎指正。

本文链接：https://blog.csdn.net/qq_45021462/article/details/107291729

版权

笔记专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了如何使用CSS3的@font-face规则和Fontsquirrel网站来安装和使用特殊字体。通过Fontsquirrel的Webfont Generator，可以生成不同格式的字体文件以支持不同浏览器。此外，还强调了在@font-face规则中定义font-family和src属性的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@font-face规则

规定网页上可以显示的一种特殊字体，无论是浏览器还是其它软件（比如word），所有的软件上可以呈现出来用户可以选择的字体，都应该在我们的本地硬盘上相关文件夹里有关于字体的文件，如果想显示对应的字体，在文件夹里必须有对应的字体文件，如果没有则不能使用该文字字体。
对于网页，在这个规则没有出台之前，要想显示某一特殊的字体，有两种解决方式：
第一种方式就是让用户安装这种字体，然后显示出来；
第二种方式是图片形式，把这种特殊字体做在图片里面，这样无论什么情况下用户看到的都是特殊字体的效果，但是图片打开比较慢。
现在新的CSS3提供了一种新的解决方式：
把网页上用到的特殊字体放在服务器端，也就是放在网站的文件里，当发现客户端引用到一种特殊字体的时候，就从服务器端对应文件夹里找到对应的字体，下载到本地，就可以完成特殊字体在本地显示。
在这里插入图片描述
字体文件被保存在文件夹中，不同浏览器所需的字体文件的格式是不同的，为了支持不同浏览器的浏览，可以生成这四种不同格式的字体文件。

当我们在网络上找到一种字体，，可能这种字体被下载下来使用的时候只提供了其中某种格式的文件，我们可以生成其他格式的文件，可以登录到这个网站试一下，这个网站打开，可以通过提交一种文件格式来生成这种字体的其它不同种文件格式，只需要在对应的文件格式里划上对号就可以了。这样其它种文件格式生成之后，下载到本地，放在站点文件里，就可以使用这个@font-face规则来进行这种文字的添加。

详细介绍fontsquirrel字体安装（特殊字体 @font-face）

首先可以在这里（网址：https://www.fontsquirrel.com/fonts/fira-sans）这个网站下载特殊字体。点击下载OTF下载。
下载下来如下图一样，可以看到都是otf格式的文件。
接下来就到这里（网址：https://www.fontsquirrel.com/tools/webfont-generator）这个网站获取其它格式的文件，先上传一种字体文件，单击upload fonts上传。
上传完成之后，有三种可以选择下载，选择第三种，expert…，并且把其它的文件格式都打上对勾，记得选择第三种下载。
选中Yes…，点击download your kit，就可以下载了。
下载下来是一个压缩包
解压之后文件结构如下，各种类型的文件都有

8.实例应用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文字与文本</title>
	<!-- <link rel="stylesheet" href="D:/fonts/webfontkit-20200711-084615/stylesheet.css"> -->
	<style>
		p{
			font-family: firasansfour;/* 在对应的样式里面来引用这种字体，要和定义的字体的名字一致 */

		@font-face{/* 在选择器的位置写上@font-face */
			font-family: firasansfour;/* 定义字体的名字，不管这个字体原来下载下来是什么名字，都可以起一个新的名字 */
			src:url('../../fonts/webfontkit-20200711-084615/firasans-four-webfont.eot'),
				url('../../fonts/webfontkit-20200711-084615/firasans-four-webfont.woff'),
				url('../../fonts/webfontkit-20200711-084615/firasans-four-webfont.ttf'),
				url('../../fonts/webfontkit-20200711-084615/firasans-four-webfont.svf');/* 新字体的来源，多个用逗号分隔开 */
		}		
	</style>
</head>
<body>
	<p>这是最长的单词pneumonoultramicroscopicisilicovolcanoconiosis</p>
	<div>这是最长的单词pneumonoultramicroscopicisilicovolcanoconiosis</div>
</body>
</html>