【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程序的建议[转]

    <编写高质量代码 改善Python程序的91个建议> <编写高质量代码 改善Python程序的91个建议>读后程序学习小结 - BigDeng_2014的专栏 - CSDN博客 ...

  2. Go中的iota

    当时在学习Iota这个知识点的时候仅仅是一笔掠过,比如这种 const( a=iota b c ) 一眼看出他怎么使用的时候就觉得自己已经懂得了 再到后来看到这样的例子 const( a = 5*io ...

  3. [PL]如果天空是黑暗的,那就摸黑生存

    “如果天空是黑暗的,那就摸黑生存:如果发出声音是危险的,那就保持沉默:如果自觉无力发光的,那就蜷缩于墙角.但不要习惯了黑暗,就为黑暗辩护:不要为自己的苟且而得意:不要嘲讽那些比自己更勇敢更热情的人们. ...

  4. 百度地图--JS版

    百度地图JS版本 ----选择关键字地图展示对应地址---- CSS body, html { width: %; height: %; margin: ; font-family: "微软 ...

  5. win 10 dpi 缩放

    win 10 dpi dwm 效果,影响最大的函数有 参考资料:https://blog.csdn.net/chenlycly/article/details/53142098 GetSystemMe ...

  6. 如何优雅地用Redis实现分布式锁?

    转: 如何优雅地用Redis实现分布式锁?   BaiduSpring 01-2500:01 什么是分布式锁 在学习Java多线程编程的时候,锁是一个很重要也很基础的概念,锁可以看成是多线程情况下访问 ...

  7. java强引用 软引用 弱引用 虚引用

    https://www.cnblogs.com/yw-ah/p/5830458.html Java四种引用包括强引用,软引用,弱引用,虚引用. 强引用: 只要引用存在,垃圾回收器永远不会回收Objec ...

  8. Python的安装与小程序的编写

    Python的安装 在此之前,我完全不了解Python,为了完成任务,在慌忙之中了解了一下Python,通过百度,一步步安装好Python 过程 1.从官网中找到下载菜单并下载最新版本 2.双击pyt ...

  9. 1.6分布式通讯协议-WebService

    RPC 包含的要素(webservice) 协议层:tcp/ip 应用层: http协议 SOAP: http+xml 分布式通信框架-webservice分析 什么是webservice webse ...

  10. Apicloud学习第四天

    apicloud存储机制,添加和获取存储的数据 $api.setStorage('currentCity', cityList[i_]); $api.getStorage('currentCity') ...