html 中加载字体太慢,css字体文件包太大无法引入怎么处理?
前端开发的同学,我们经常会碰到需要还原设计稿中的特殊字体。这时,我们可能会采用两种方案:
1、使用photoshop将文本图层单独导出成图片;
2、直接引入改字体的字体库.ttf文件
首先第一种方案的缺点,使用图片代替文字,制作和维护的成本很高,前期切图,合并雪碧图比较繁琐,后期修改和维护更是麻烦。同时使用图片,会带来更多的宽带消耗;用户体验方面,用户无法进行文字的选择,复制等操作,体验也不好。
第二种方案,解决了上述的一些问题,但是由于汉字数量太大,导致中文字体文件也较大,通常都会有几M大小,不适合在项目中使用。尤其是移动端项目,由于字体加载速度很慢,体验会十分不好。
那么如何解决移动端引入的字体文件过大问题?下面本篇文章将介绍两种自动化工具,来实现在移动端愉快的使用特殊字体,分别是Font-Spider(字蛛)和fontmin。
浏览器对字体的支持
不同浏览器对字体的支持不同,所以我们要对不同的浏览器制作不同的字体。下图是浏览器对字体的支持情况,其中N为不支持,P为部分支持,Y为支持。
Font-Spider(字蛛)
字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。Font-Spider的使用方法很简单,官网介绍的也很详细,下面简单介绍,也可直接去官网查看.
1、首先,全局安装font-slidernpm install font-spider -g
2、在css中使用/*声明 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 文件必须存在,其余的格式将由工具自动生成
3、运行font-slider命令font-spider ./demo/*.html
页面依赖的字体将会自动压缩好,原来几M的字体文件现在只剩下几k了, 是不是很爽呢.
4、使用gulp,grunt插件
除了直接进行编译,font-slider还提供了gulp和grunt的插件,可以更方便的在项目中使用,具体使用可直接到github查看
字蛛 grunt 插件: https://github.com/aui/grunt-font-spider
字蛛 gulp 插件:https://github.com/aui/gulp-font-spider
5、使用的局限
font-slider虽然好用,但是由于其原理是直接分析本地 CSS 与 HTML 文件获取没有WebFont中没有使用过的字符,这样一来,对于动态生成的文字,就没有办法使用font-slider了.这是个坏消息!尤其在当下,很多框架都是数据驱动的,更是很多文字都不会直接出现html文件中.对于这种情况, 下面介绍的fontmin或许能解决.
四、使用Fontmin
Fontmin 是由百度推出的一个字体子集化方案。使用fontmin可以按需提取字体中的部分字型,最小化打包字体,自动生成 WebFont 字体文件(ttf/woff/eot/svg)和 CSS 文件, 并可利用 @font-face 将自定义字体呈现到网页中,提升网页文字体验。Fontmin 提供了 Node.js 模块和客户端 2 种使用方法,下面主要介绍Node.js模块的使用,更多使用请移步到Fontmin快速指南
1、安装fontminnpm i -g fontmin
2、配置
在项目中创建fontmin.jsvar Fontmin = require('fontmin');
var srcPath = 'font/*.ttf'; // 字体源文件路径
var destPath = 'font'; // 字体输出路径
var text = '我你今天中大奖了快来领红包';//有哪些文字可能需要用到这个字体的,都可以在这里进行配置
// 初始化
var fontmin = new Fontmin()
.src(srcPath) // 输入配置
.use(Fontmin.glyph({ // 字型提取插件
text: text // 所需文字
}))
.use(Fontmin.ttf2eot()) // eot 转换插件
.use(Fontmin.ttf2woff()) // woff 转换插件
.use(Fontmin.ttf2svg()) // svg 转换插件
.use(Fontmin.css()) // css 生成插件
.dest(destPath); // 输出配置
// 执行
fontmin.run(function (err, files, stream) {
if (err) { // 异常捕捉
console.error(err);
}
console.log('done'); // 成功
});
3、输出
执行fontmin.js文件就可以配置好的目录下输出对应的字体及css文件,字体文件也会由原来的即M变成几k了.node fontmin.js
Fontmin还提供了客户端, 直接把 TTF 拖进去,左侧输入需要文字,右侧实时看效果。点击生成,一步搞定. 建议还是使用node模块的方式, 只要在项目中配置好, 以后再有任何文字需要使用字体, 直接添加到fontmin.js中的text中,执行node fontmin.js命令就搞定了.
4、缺点
Fontmin适用于文字不经常变动, 或者在一定范围内变动的情况, 如果文字经常变,而且没有固定的范围,那么也是没有办法的。
更多web前端自学知识,请查阅 HTML中文网 !!
html 中加载字体太慢,css字体文件包太大无法引入怎么处理?相关推荐
- 《R数据可视化手册》一1.4 从Excel文件中加载数据
本节书摘来自异步社区<R数据可视化手册>一书中的第1章,第1.4节,作者 [美]Winston Chang,更多章节内容可以访问云栖社区"异步社区"公众号查看 1.4 ...
- 如何在OsgEarth中加载谷歌卫星地图的ArcGISServer服务教程
说明: 本实例演示如何在arcgis中发布下载好的影像瓦片数据,在osgearth中加载发布好的瓦片服务. 本实例使用软件版本:ArcGIS10.2,osg3.3.1和osgEarth2.5 VC10 ...
- html字体库otf文件使用,在webpack中加载.otf字体文件的正确方法是什么?
使用webpack时加载.otf字体文件的适当方式是什么?我曾多次尝试包括在我的webpack.config.js的规则,没有任何成功的基础上,很多例子我大致如下的线路看出:对于在webpack中加载 ...
- 在Vue.js中加载字体的最佳做法
博客原文:https://blog.zhangbing.site/2021/04/07/best-practices-for-loading-fonts-in-vue/ 添加字体不应该对性能产生负面影 ...
- webpack 中的加载器简介||webpack 中加载器的基本使用——1. 打包处理 css 文件 2. 打包处理 less 文件 3.打包处理 scss 文件
webpack 中的加载器 1. 通过 loader 打包非 js 模块 在实际开发过程中,webpack 默认只能打包处理以 .js 后缀名结尾的模块,其他非 .js 后缀名结尾的模块, webpa ...
- 百度云虚拟主机中的网站不能加载静态js、css和images等文件的解决方案
百度云虚拟主机下配置个人网站不能加载静态js.css和images等文件时,需要在webroot(网站根目录)下创建bcloud_nginx_user.conf,在这个文件里面设置加载静态文件资源. ...
- Three.js Vue 如何加载字体,和遇到问题解决: 中加载字体的问题 Uncaught SyntaxError: Unexpected token = in JSON at position 0
Three.js Vue 中加载字体的问题 Uncaught SyntaxError: Unexpected token = in JSON at position 0 一.转换字体文件到 json ...
- QT中main函数中加载外部字体:OTF
QT中main函数中加载外部字体:OTF 我们开发的程序中,如果想使用外部下载的开源字体,同时保证在软件发布时,程序字体能保证和开发者环境下一致,且不想通过安装字体方式实现字体跟随软件时,我们需要在代 ...
- ci框架中引入css,php ci框架中加载css和js文件失败的原因和解决方法
php ci框架中加载css和js文件失败的原因和解决方法 发布时间:2021-07-01 12:08:38 来源:亿速云 阅读:50 作者:chen 本篇内容介绍了"php ci框架中加载 ...
- 如何在HTML中加载一个CSS文件?
可以通过link标签加载: <link rel="stylesheet" href="wcss.css" type="text/css" ...
最新文章
- Pandas matplotlib 无法显示中文 Ubuntu16.04
- SWEET HOME!田志喜研究员:给中国大豆“嵌入”高产基因
- Windows下Redmine插件安装
- dubbo服务降级与限流
- python ctypes struct_Python之ctypes
- Linux下LAMP服务配置
- 稀疏表示 过完备字典
- ad自动布线过孔_AD15布线方法汇总
- ps切图怎么做成html,PS切图怎么导出网页 PS切图怎么生成源代码
- 计算机病毒如何彻底去除,电脑中病毒最彻底的清除方法 彻底清理删除电脑病毒的几种简单方法...
- OpenCV之 图像染色
- 解决eclipse neno在线下载安装缓慢及失败的问题
- 支持全球游戏加速 飞鱼星发烧级玩家路由G7上市
- HTML学习13:div和表格布局
- 炫‘库’行动-人大金仓有奖征文-挑战国产数据库金仓上k8s(二)
- 各种类型相机rtsp取流格式大汇总
- 运筹说 第63期|论文速读之无人机车辆路径问题
- php 根据银行卡号获取所属银行
- QT安装教程(简易)
- 计算机语言space什么意思,space是什么意思
热门文章
- php学生成绩系统,php019学生信息学生成绩系统
- 我的世界服务器怎么修改标语,我的世界怎么用资源包修改闪烁标语
- matlab画森林图,R语言meta分析(4)网状Meta 分析
- GNS3(1.下载与安装)
- 将城市按照拼音首字母进行分类
- 现代通信原理思维导图--第二章 确知信号
- [360优化]让360安全卫士比火绒还好用 #调教360
- 3D LUT调色预设如何导入并应用?(fcpx/PR/AE/PS/LR/达芬奇)
- VB语言通用基础语句
- 太强了,头发丝完整保留!华盛顿大学研究员开源的实时视频抠图工具