html字体文件太大,引入第三方字体体积太大的问题

背景

在做营销活动的时候，设计稿这边使用了"思源"的字体。为了统一整个页面的字体风格，于是就把用到的字体引进来项目，但是最后发现字体大小竟然达到了 14MB，加载时间为3.74秒，可以预想到加载时间会进一步增长。如果用户还处于弱网环境下，这个等待时间是不能接受的。

解决方法 - font-spider

font-spider通过分析本地的CSS与HTML文件获取字体中没有使用的字符，并把这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。

用法

全局安装

npm i font-spider -g

复制代码

新建一个项目

项目里放入字体，字体一定是ttf格式，并使用css文件引入字体，并在html里引入

index.html

font-family: "SourceHanSerifCN-Light";

}

Document

表达爱有五种语言，你是属于哪一种呢？ click P2(引导页)

你是不是总觉爱而不得？在亲密关系理论里，爱有五种语言： A肯定言语

B精心时刻 C接受礼物 D服务行动 E肢体接触

如果你觉得自己做的对方总不领情，或者对方说爱你你却感觉不到，可能是你们爱的语言出现偏差，也即爱的方式不一致，你知道自己爱的语言吗？

马上来测试 P3~P12(问题页，2道问题为1页)

单选出新最合适的选项，别纠结，遵循内心第一选择。(每个问题页都有)

复制代码

index.css

@font-face {

font-family: "SourceHanSerifCN-Light";

src: url("./SourceHanSerifCN.ttf");

}

复制代码

终端使用命令压缩

font-spider index.html

复制代码

输出成功

会发现会把10几兆的字体文件变成40多KB，因为他把多余的文字去掉了，只提取我们页面出现的那些文字。

缺点

font-slider虽然好用,但是由于其原理是直接分析本地 CSS 与 HTML 文件获取没有WebFont中没有使用过的字符,这样一来,对于动态生成的文字,就没有办法使用font-slider了.这是个坏消息!尤其在当下,很多框架都是数据驱动的,更是很多文字都不会直接出现html文件中.对于这种情况, 其他工具fontmin或许能解决.

最后

通过font-spider把页面上出现的文字处理了一次，体积和加载时间都缩短了很多。

html字体文件太大,引入第三方字体体积太大的问题相关推荐

html中怎样引入外部字体文件路径,CSS引入外部字体
.SVG,适用于Chrome.IPhone 那我们如何获得这四种文件呢?这里推荐一个线上字体转换软件,地址如下: https://www.fontsquirrel.com/tools/webfont- ...
vue+elementui项目中引入第三方字体文件的方法示例
# 问题描述: vue中项目,发现相同页面在不同电脑上,字体显示效果不一致,例如:代码中设置了楷体,在某些电脑上显示不是楷体效果. # 解决方案: 1.先下载字体文件所需的.ttf文件(这不很重要,你 ...
uniapp微信小程序引入第三方字体库
前言最近在使用第三方字体库,然后发现使用uniapp做小程序时引入第三方字体库有着挺多坑,收集了一些网上的资料,我大概整理下,防止以后继续踩坑这是uniapp官网的引入字体图标方法字体引入从c ...
在 Nuxt.js 和 Vue.js 项目中引入第三方字体或艺术字
一.需求分析在我们写前端页面的时候,大部分时候是不需要用到第三方字体的,但如果是面向C端的页面,比如宣传页,就有可能会引入第三方字体,主要还是看UI设计师咋想了,此时我们可以通过让UI将特殊字体切成 ...
Swift 引入第三方字体库
引入第三方字体库为了达到好的效果展现,我们往往会引入第三方字体库,以使我们工程中的字体展示达到最佳,这方面可能对于阅读之类的APP会用到的更多. 在这里也是随便从网上下载的一个字体,名为经典隶书变体 ...
微信小程序 - 引入第三方字体（使用网络字体艺术字）
前言有时候因项目需求,可能需要一套第三方艺术字体,就像如图所示效果(店内自取 / 外卖): 实现当然,也可以直接使用微信 API wx.loadFontFace ,具体请查看官方示例文档. 引入 ...
css引入第三方字体（等宽非衬线）
需求:是系统字体设置成等宽的,内置字体有等宽类型,但是却不美观:想要那种英文字体等宽的,数字不是衬线的,最后找到了Droid Sans Mono 很符合预期: 效果如下:等宽字体且对齐,数字0没有斜 ...
微信小程序 - 引入第三方字体（使用网络字体）
前言因项目需求,需要一套第三方字体,如下图所示效果(YC MEMBERSHIP SEASON CARD 和数字0): 实现 1.引入一套第三方字体(如上图所示的第三方字体). 2.在 App.vu ...
小程序引入第三方字体
(1)新建font.js // 加载字体 let loadFont = function(){wx.loadFontFace({family: 'zihun', //设置一个font-family使用 ...

html字体文件太大,引入第三方字体体积太大的问题

html字体文件太大,引入第三方字体体积太大的问题相关推荐

最新文章

热门文章