字体格式转换与压缩

最新推荐文章于 2024-06-20 15:48:19 发布

BlueDemon2580

最新推荐文章于 2024-06-20 15:48:19 发布

阅读量1.3k

点赞数

分类专栏：实用小工具文章标签： css3

本文链接：https://blog.csdn.net/qq_39146122/article/details/106438056

版权

实用小工具专栏收录该内容

1 篇文章 0 订阅

订阅专栏

字体格式转换与压缩

参考链接：
1.http://www.360doc.com/content/18/0925/11/17814860_789494015.shtml
2.https://blog.csdn.net/jeffasd/article/details/82769689

一、工具介绍：

1.在线转换字体格式工具：Font Converter.org
2.压缩工具：font-spider
3.【附】特殊字体在线生成器：花藤字体在线生成器

二、字体压缩：

安装

1.前提：先要安装npm与node
2.安装font-spider(字蛛)

# 	npm install font-spider -g

3.安装之后输入

# 	font-spider

看到下面的就说明安装成功了
在这里插入图片描述

使用

首先要有项目中的html文件在其外联的css样式中要规定字体文件

注意：
在css中声明webfont（字蛛似乎只支持woff ttf svg），故在使用之前可以使用格式转换器【在工具模块有提及】

目录结构

>demo                     --------------项目文件
    index.html
    >font                 --------------存放字体文件夹
        Avenir_Next.ttf   --------------文件

index.html中代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  /*声明 WebFont*/
  @font-face {
    font-family: 'Avenir_Next';
    src: url('./font/Avenir_Next.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  /*使用选择器指定字体*/
  .home h1, .demo > .test {
      font-family: 'Avenir_Next';
  }
</style>
<body>
  <div class="home">
    <h1>ashdashdASDFGHJKLLL,hajsfgasdfgjahsdgfjhdasgjhfgjashgjdhfasdgfhj.</h1>
  </div>
</body>
</html>

其他两种格式格式
src: url(’./font/Avenir_Next.woff’) format(‘woff’);
src: url(’./font/Avenir_Next.svg’) format(‘svg’);

开始压缩

在使用fonts-spider之前先cd到目标文件目录就是你需要生成的新的字体文件的html目录

或者写全目录
使用font-spider生成：

# 	font-spider *.html

*是通配符代表所有的html文件
输入之后回车开始生成：
在这里插入图片描述

压缩文件的大小由测试的测试的html中字的多少决定，我测试的比较少，所以只有11kb左右

生成完毕的字体文件会代替原来的字体文件，而原来完整的字体文件会进入到当前目录下的一个叫.font-spider的隐藏文件中

最终目录结构

>demo                         --------------项目文件
    index.html
    >font                     --------------存放字体文件夹
        Avenir_Next.ttf       --------------压缩后的字体文件
        >.font-spider
            Avenir_Next.ttf   --------------原来完整的字体文件

BlueDemon2580

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
字体格式转换与压缩

字体格式转换与压缩参考链接：1.http://www.360doc.com/content/18/0925/11/17814860_789494015.shtml2.https://blog.csdn.net/jeffasd/article/details/82769689一、工具介绍：1.在线转换字体格式工具：Font Converter.org2.压缩工具：font-spider3.【附】特殊字体在线生成器：花藤字体在线生成器二、字体压缩：安装1.前提：先要安装npm与node2.
复制链接

扫一扫

专栏目录