最近在前端开发时,因为设计的原因,要引用一些特殊字体(otf格式),但是后来发现这些字体文件非常大,平均每个要8mb左右,严重影响了网页效率。经过一番搜索,发现了前端字体压缩工具(只支持utf-8格式)font-spider.

font-spider介绍

具体介绍可以查看,http://font-spider.org/index....

安装

先安装好 NodeJS,然后执行:npm install font-spider -g

使用

/*声明 WebFont*/
@font-face {
font-family: 'pinghei';
src: url('../font/pinghei.eot');
src:
url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),
url('../font/pinghei.woff') format('woff'),
url('../font/pinghei.ttf') format('truetype'),
url('../font/pinghei.svg') format('svg');
font-weight: normal;
font-style: normal;
} /*使用选择器指定字体*/
.home h1, .demo > .test {
font-family: 'pinghei';
}

@font-face 中的 src 定义的 .ttf 文件必须存在,其余的格式将由工具自动生成
所以,一定要有ttf格式字体,如果是其他类型的,可以在线转换https://www.fontke.com/tool/c...

生成字体

运行 font-spider ./demo/*.html命令

然后就能发现,压缩好的字体都很小,只有几k

Web引用中文个性字体的更多相关文章

  1. html网页引用中文字体,解决加载缓慢办法

    [ttf 压缩]html网页引用中文字体,文件过大,加载缓慢的解决办法[字蛛][web font] [字蛛]http://font-spider.org/ 先安装好 NodeJS,然后执行: npm ...

  2. 网站中使用中文个性字库字体--@font-face解决方案探索 l(转)

    最近的项目有用到特别中文字体,最终效果如下图: 红线标记处均为字体,可选中,交互起来,比图片方便太多了. 解决思路就是将体积巨大的中文字库,取子集,只包涵要使用的那部分文字,因此体积就很小了(包含10 ...

  3. 如何在Web引用中使用项目自定义的类

    这个是老架构了,不推荐现在这么用,维护一个老项目记录一下. 项目中WebService和客户端是在一个解决方案下,实体类是一个公用的Project,如果使用Web引用自动生成的类会缺少一些实体类定义的 ...

  4. 用C#通过反射实现动态调用WebService 告别Web引用

    我们都知道,调用WebService可以在工程中对WebService地址进行WEB引用,但是这确实很不方便.我想能够利用配置文件灵活调用WebService.如何实现呢? 用C#通过反射实现动态调用 ...

  5. 添加web引用和添加服务引用有什么区别?

    添加web引用和添加服务引用有什么区别,Add Service References 和 Add Web References 有啥区别?参考 http://social.microsoft.com/ ...

  6. (转)添加服务引用和添加Web引用对比

    在WindowsForm程序中添加服务引用和Web引用对比 为了验证书上有关Visual Studio 2010添加服务引用和Web引用的区别,进行实验. 一.建立一个Web服务程序项目新建项目,选择 ...

  7. (转)2.4.1 基础知识--添加服务引用与Web引用的区别

    <Web服务开发学习实录>第2章构建ASP.NET Web服务,本章我们将学习创建Web服务的各种方法,并重点对使用Visual Studio创建ASP.NET Web服务和修改Web服务 ...

  8. 添加服务引用和添加Web引用对比

    原文:添加服务引用和添加Web引用对比 在WindowsForm程序中添加服务引用和Web引用对比 为了验证书上有关Visual Studio 2010添加服务引用和Web引用的区别,进行实验. 一. ...

  9. web引用和服务引用

    原文:web引用和服务引用 在VS2010环境下开发C#的winform程序或者WPF时,会碰到调用web引用的问题. 1.添加一个服务引用时,会在app.config里生成basicHttpBind ...

随机推荐

  1. SpringBoot项目启动时执行初始化操作

    SpringBooot中的CommandLineRunner接口会在所有Spring Beans初始化之后,SpringApplication.run()之前执行. 1.添加pom引用 <?xm ...

  2. vue使用笔记一

    1.vue-cli安装 sudo npm install -g @vue/cli 2.查看是否安装成功 vue --version 3.创建项目 vue create hello-world 4.启动 ...

  3. 记:第一次更新服务器CUDA和GPU驱动

    因有需求需要改动centos7中的CUDA(更新到10)和GUP 的driver(更新到410)的版本. 事先需要查看原版本的信息,使用nvidia-smi可以查看driver的版本信息(最新的也显示 ...

  4. 联想Z485安装64位ubantu

    开始今天的正式写作之前不得不吐槽一下联想电脑,真的是很垃圾!联想Z485使用的是AMD的处理器,性能差的很,更让人不能忍的是,居然不能正常安装64位ubantu.这个情况让那些想在自己笔记电脑上安装T ...

  5. 【Linux 源码】Linux源码比较重要的目录

    (1)arch arch是architecture的缩写.内核所支持的每一种CPU体系,该目录下都有对应的子目录. 每个CPU的子目录,又进一步分解为boot.mm.kernel等子目录,分别包含控制 ...

  6. SELECT 与 SET给标量赋值

    本文转自 :https://blog.csdn.net/perddy/article/details/4033406 SQL Server推荐使用 SET 而不是 SELECT 对变量进行赋值.当表达 ...

  7. Spark-Core RDD转换算子-双Value型交互

    1.union(otherDataSet) 作用:求并集. 对源 RDD 和参数 RDD 求并集后返回一个新的 RDD scala> val rdd1 = sc.parallelize(1 to ...

  8. 数位DP 计划

    通常的数位dp可以写成如下形式: [cpp] view plain copy int dfs(int i, int s, bool e) { if (i==-1) return s==target_s ...

  9. [集合]Map

      Map集合的功能概述 a:添加功能 * V put(K key,V value):添加元素.* 如果键是第一次存储,就直接存储元素,返回null * 如果键不是第一次存在,就用值把以前的值替换掉, ...

  10. 使用CSDN-markdown编辑器粘贴代码块时崩溃问题解决

    原因:代码段换行符失效,所有代码一行显示 解决方法:使用Chrome浏览器即可解决(使用Microsoft Edge会出现此问题) 效果展示: # _*_ coding:utf-8 _*_ impor ...