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字体文件包太大无法引入怎么处理?相关推荐
- html中字体大写怎么写,CSS 字体属性
CSS 字体属性 属性描述font简写属性.在一条声明中设置所有字体属性. font-family规定文本的字体系列(字体族). font-size规定文本的字体大小. font-style规定文本的 ...
- html字体相关的属性,CSS 字体属性font相关的用法
phpweb设置字体名称属性(font-family) 这个属性设置页面中选择用哪种字体,常用的字体有:Simsun.Arial.Verdana.Helvetica. sans-serif等,定义方法 ...
- php文件上传css,CSS_文件上传input file简便美化方案(css),文件上传input在各个浏览器里 - phpStudy...
文件上传input file简便美化方案(css) 文件上传input在各个浏览器里表现形式都不一样: ie6 ie7,8,9 ff chrome 这里介绍一种简单实用的,在各种浏览器下表现一致的美化 ...
- html 字体样式加粗,css字体怎么加粗?
css可以使用font-weight属性设置文本加粗.该属性用于设置显示元素的文本中所用的字体加粗.所有主流浏览器都支持font-weight属性. font-weight 属性设置文本的粗细. 属性 ...
- android 字体代码是什么字体,Android上的CSS字体
我正在使用@ font-face在网站上显示联盟哥特式,但它并没有显示在 Android 1.6上.这是我的代码,生成与 Font Squirrel's @font-face generator @f ...
- 从零开始学前端:CSS字体属性和文本属性 --- 今天你学习了吗?(CSS:Day08)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS引入 - 今天你学习了吗?(CSS:Day07) 文章目录 从零开始学前端:程序猿小白也可以完全掌握 ...
- css 字体图标更改颜色_在CSS中更改字体
css 字体图标更改颜色 CSS字体属性 (CSS font properties ) Font properties in CSS is used to define the font family ...
- CSS字体属性之字体系列、字体大小、字体粗细、字体样式以及字体的符合属性(基础详解)
目录 CSS字体属性 字体系列 字体大小 字体粗细 字体的符合属性 字体属性的总 CSS字体属性 CSS字体属性之字体系列.大小.粗细以及文本样式 字体系列 CSS使用font-family用于定义文 ...
- php中字体样式的设置,CSS里字体样式怎么设置
在网页中我们常常对网页中文字设置字体,用font-family这个属性就可以对字体样式进行设置了.那么我们今天就来教大家从html的字体到css字体的设置方法. 原始的html字体设置 Html的文字 ...
最新文章
- 据说,这是生物科研狗的真实经历……
- log4j 超完美配置文件!
- linux php 指令,在 Linux 命令行中使用和执行 PHP 代码(一)
- android壁纸选择器,Android 图片选择器
- OOD面向对象设计浅谈
- java 循环do while,Javawhile循环与do…while循环 - Java教程
- SQL Server插入中文数据出现乱码问题
- 《深入理解JVM.2nd》笔记(二):Java内存区域与内存溢出异常
- vue 判断两对象是否一致_你的.vue文件就已经是你的文档了
- fcpx瘦身插件_FCPX减小内存,瘦身小技巧 - Final Cut - 沃CG - 一个更有价值的艺术设计学习平台 - ae教程 c4d教程 - Powered By EduSoho...
- cocoapods安装bug
- NSX-T业务转发04—— 多层Tier0Tier1路由
- Element UI的数据表格数据检索方法
- 关于信号强度单位db和dBm
- 航空运输安全及鉴定,保障货物成功抵达
- 关于VISIO2013显示首要事项闪退问题
- 5个免费GitHub最强前端学习资源 程序员不花一分钱也能变很强
- android源码分析
- 【转】关于usr/bin/ld: cannot find -lxxx问题总结
- Linux虚拟机不显示IP地址的三种解决方法
热门文章
- mac基本操作和关闭安全模和任务监控器
- 携程机票 Android Jetpack 与 Kotlin Coroutines 实践 | 开发者说·DTalk
- 正确及时关闭数据库连接
- 进行外贸邮件群发需要注意的基本事项
- 无法打开内核设备“\\.\VMCIDev\VMX”: 操作成功完成。是否在安装 VMware Workstation 后重新引导?模块“DevicePowerOn”启动失败。
- 软件创新实验室:Spring框架
- iOS之微博UI实例--拟物化设计(成功了90%)
- MFC:将工程从VC6.0工程升级到VS2017所遇到的代码不兼容问题集合
- 一般是指用计算机绘制的画面,()一般指用计算机绘制的画面,如直线、圆、圆弧、矩形、任意曲线和图表等。A、图形B、图像C、动画D、图...
- Git 中 6 个基本常用命令