【ttf 压缩】html网页引用中文字体,文件过大,加载缓慢的解决办法【字蛛】【web font】

【字蛛】http://font-spider.org/

先安装好 NodeJS,然后执行:

npm install font-spider -g

安装后,会看到一堆报错、警告,不必理会

在 CSS 中使用 WebFont:

/*声明 WebFont*/
@font-face {
font-family: '方正兰亭刊黑_GBK';
src: url('../fonts/方正兰亭刊黑_GBK.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/*使用选择器指定字体*/
body{
font-family: '方正兰亭刊黑_GBK';
}

@font-face 中的 src 定义的 .ttf 文件必须存在

运行 font-spider 命令:

font-spider D:\web\helloWorld\*.html 

页面依赖的字体将会自动压缩好

html网页引用中文字体,解决加载缓慢办法的更多相关文章

  1. CSS3 关于@font-face引用中文字体解决办法

    有两种方法,一种简单的,一种比较复杂,都可以实现(注:这里的方法只适合使用少量的中文字体,如果使用的字量过大,请使用其他方法解决) 第一种:简单的 1.下载需要的中文字体的.ttf格式,这个都不难找到 ...

  2. 页面引入外部字体ttf,如何提取所需要的ttf字体或者加载过慢的解决方法-1127更新

    最近几天编写手机端的页面之后,文中需要华文行楷字体,在网上下载后,引入到了自己的前端页面,以为没有什么事了,继续码代码 @font-face { font-family:huawen; src: ur ...

  3. 解决网页中Waiting (TTFB)数据加载过慢的问题

    解决网页中Waiting (TTFB)数据加载过慢的问题 最近做了一个网页,在本地测试良好,数据可以得到很快的反馈,但是当部署到云端Linux上时候,就会出现加载缓慢的问题.本地测试,得到数据大概3s ...

  4. seo网页加速技术,预加载 DNS Prefetching 详解

    seo网页加速技术,预加载 DNS Prefetching 详解 DNS Prefetching 是什么 : DNS 是什么-- Domain Name System,域名系统,作为域名和IP地址相互 ...

  5. iis发布后模板字体不能加载的解决方案

    在使用ace模板的过程中就曾遇到过图标不显示的情况, 1.在iis和vs运行都不能显示图标,添加缺失的字体库后可以访问 2.把项目签入到阿里云时再一次失效,解决方法是添加Mime类型 .woff  a ...

  6. imagesLoaded – 检测网页中的图片是否加载

    imagesLoaded 是一个用于来检测网页中的图片是否载入完成的 JavaScript 工具库.支持回调的获取图片加载的进度,还可以绑定自定义事件.可以结合 jQuery.RequireJS 使用 ...

  7. 图片_ _Android有效解决加载大图片时内存溢出的问题 2

    Android有效解决加载大图片时内存溢出的问题 博客分类: Android Android游戏虚拟机算法JNI 尽量不要使用setImageBitmap或 setImageResource或 Bit ...

  8. Android开发中如何解决加载大图片时内存溢出的问题

    Android开发中如何解决加载大图片时内存溢出的问题    在Android开发过程中,我们经常会遇到加载的图片过大导致内存溢出的问题,其实类似这样的问题已经屡见不鲜了,下面将一些好的解决方案分享给 ...

  9. 修改 docker image 安装目录 (解决加载大image时报错:"no space left on device")

    修改 docker image 安装目录 (解决加载大image时报错:"no space left on device" ) 基于Ubuntu16.04 docker版本: 17 ...

随机推荐

  1. python学习day21 面向对象(三)嵌套/特殊方法

    1.嵌套 类/方法/对象都可以当做变量或嵌套到其他类型中. 函数的参数可以是任意类型. 可哈希(不可变)数据类型可以做字典的key. 类和对象可以做字典的key. 2.特殊方法(8) __init__ ...

  2. react16 渲染流程

    前言 react升级到16之后,架构发生了比较大的变化,现在不看,以后怕是看不懂了,react源码看起来也很麻烦,也有很多不理解的地方. 大体看了一下渲染过程. react16架构的变化 react ...

  3. Java基础--二维数组

    1.二维数组的定义 二维数组表示行列二维结构,在栈空间中的二维数组的地址指向堆空间中的一维数组,堆空间中的一维数组的地址又指向一维数组所在的内存空间. 2.二维数组的声明 二维数组声明有3种方式,推荐 ...

  4. 03-oracle中的高级查询

    1.连接查询 1.1 使用连接谓词指定的连接 介绍: 在连接谓词表示形式中,连接条件由比较运算符在WHERE子句中给出,将这种表示形式称为连接谓词表示形式,连接谓词又称为连接条件. 语法: [< ...

  5. 对半导体制造(FAB)工种的全方位解析

    本文转载自微信公众号 - 感集网, 链接 https://mp.weixin.qq.com/s/MRoWRbKZFBrJcQAZPqDa7w

  6. 小米5如何支持AT&T网络运营商

    最近在美帝生活,买了一张H2O的电话卡,但是很不幸,没有办法连接到网络. 在网上翻看了好多帖子,提到说修改APN,但是基本上都没提怎么修改,不知道这些大神都是怎么修改的.于是寻求google帮助,最后 ...

  7. python3 练手实例3 摄氏温度与华氏温度转换

    def wd(): w=input('请输入一个摄氏温度或者一个华氏温度,如,34c/C or 34f/F:') if w[-1] in ['c','C']: w=float(w[:-1]) hs=1 ...

  8. Web安全基础——小白自学

    2019-02-23   19:41:49 话不多说,直接分享我学习到的东西~ Web万维网(World Wide Web,WWW),这个名称我们熟悉不过啦.跟它密切相关就是HTTP,叫做超文本传输协 ...

  9. Groovy中的GString

    在讨论GString之前,我们先讨论一下Groovy里面的String.在Groovy里面String有 println 'test string' println '''test string''' ...

  10. 关于HashSet集合add元素

    HashSet集合add元素底层实现使用的是HashMap. 简单记忆:无论HashMap put元素还是HashSet add元素,都先调用hashCode()方法,若hashCode方法返回值不同 ...