web的字体处理

最新推荐文章于 2023-01-04 22:19:19 发布

原创最新推荐文章于 2023-01-04 22:19:19 发布 · 374 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#压缩ttf #生成页面用到的文字的ttf #字体

技术点专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何寻找并下载优质字体资源，通过HTML和CSS实现自定义字体的应用，并利用font-spider工具压缩字体文件，提高网页加载速度。

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

1.可以找到一些不错的字体且容易下载的地址：http://font.knowsky.com/

2.对于字体的引用

2.1文件的目录截图

2.2 html部分

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>font</title>
<style>
@font-face {  
  font-family: "baby";  
  src: url(白舟白雨書体.ttf) format("truetype");  
}  
@font-face {  
  font-family: "mi";  
  src: url(迷你简罗卜.ttf) format("truetype");  
}
@font-face {  
  font-family: "lh";  
  src: url(迷你简立黑.ttf) format("truetype");  
}  
span { font-family: "baby", sans-serif } 
p { font-family: "mi", sans-serif } 
div { font-family: "lh", sans-serif } 
</style>
</head>
<body>
	<span>虽然今天温度很低，天气很冷，但是还是有太阳的，比较开心！绿萝会开花吗</span>
	<br>
	<br>
	<div>为什么感觉字体不全呢，一些字并没有被转化的样子，这样显示的好蹩脚啊。像个坏了的花瓶啊。。。。绿萝会开花吗</div>
	<div>zsdjfhiafgsdhfg</div>
	<br>
	<p>为什么感觉字体不全呢，一些字并没有被转化的样子，这样显示的好蹩脚啊。像个坏了的花瓶啊。。。。绿萝会开花吗</p>
</body>
</html>

3.这个地方可以教你如何压缩下载下来的字体，把一般5/6兆的.ttf文件，只取你页面需要的文字，瞬间压缩到20kb左右，地址：http://font-spider.org/

对于2的解说：

3.1.打开cmd，（在安装过nodejs的基础上），输入npm install font-spider -g进行安装

3.2安装成之后，直接font-spider D:\xampp\htdocs\teachmyself\28font\font.html（写你自己页面路径），就可以看到，你原先的ttf文件被备份了，生成了只有你页面用到的字体的ttf