字体压缩（字蛛）

2022-10-26 13:56:38 浏览数 (2)

安利

  1. 字蛛字体压缩真的非常好用
  2. 有多好用，看官方

坑

  1. 我们项目中既用到了字体图标（阿里icon），也用到了字蛛压缩的字体文件，因为都会生成一批字体文件。我犯了思维错误，以为2批文件是有关系的，其实并没有关系！！！！
  2. 我们只需要按照字蛛的教程去安装，去生成文件就行了，然后把生成的文件添加到项目中

开整

  1. 参考链接
  2. 官网
  3. 我写的代码
  • index.html
代码语言：javascript复制
<!doctype html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
    <title>字体压缩</title>
    <style type="text/css">

@font-face {

  font-family: 'zaozi'; 

  src: url('D:/webFont/font/zaozi.eot'); //原始字体文件

  src: //输出文件路径
    url('D:/webFont/font/zaozi.eot?#font-spider') format('embedded-opentype'),

    url('D:/webFont/font/zaozi.woff') format('woff'),

    url('D:/webFont/font/zaozi.ttf') format('truetype'),

    url('D:/webFont/font/zaozi.svg') format('svg');

  font-weight: normal;

  font-style: normal;

}
h3{
   font-family: 'zaozi';
  }
</style>
</head>
<body>
<h3>
字体压缩
</h3>
</body>
</html>
  • 别忘了把原始字体文件放到指定目录下
html icon 教程 压缩

0 人点赞