字体压缩 - 字蛛 font-spider

个人博客:柚子青年。

原文链接:字体压缩 - 字蛛 font-spider

安装 font-spider

npm install font-spider

index.html

<div class="content">0123456789</div>

index.css

@font-face {
font-family: ‘DINAlternateBold‘;
src: url(‘./font/DIN-Alternate-Bold.ttf‘)
}
.content {
font-family: DINAlternateBold;
}

执行命令

font-spider index.html // html 路径

注:执行后会生成一个新的字体包,只有在html内的文字才会在字体包内,适用于数字英文特殊字体处理

原文地址:https://www.cnblogs.com/webff/p/12641504.html

时间: 2024-11-10 07:55:59

字体压缩 - 字蛛 font-spider的相关文章

中文字体【字蛛】的使用

官网:http://font-spider.org/ 安装字蛛需要先安装node. 先安装好 NodeJS,然后执行: npm install font-spider -g 构建插件:grunt-font-spider | gulp-font-spider 在 CSS 中使用 WebFont: /*声明 WebFont*/ @font-face { font-family: 'pinghei'; src: url('../font/pinghei.eot'); src: url('../font

字蛛 自定义字体

可能 网站中会用到一些漂亮的文字,又不想用图片, 这样可以用自定义字体, 用的工具是 字蛛http://font-spider.org/ 字蛛工具 依赖 nodeJs, 先安装好 NodeJS,然后执行安装字蛛: npm install font-spider -g 字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式. 以下都是必须的,字蛛生成的字体是文件中有的文字,第一步 声明@font-fac

精简TTF字体、汉字字体瘦身 FontPruner(非字蛛)

网上比应用比较多的 字蛛 http://font-spider.org/ 本文使用了本机安装软件,得到瘦身后的 TTF 字体文件 准备工具: python : 我使用是 python-3.7.2.exe jre: 我是用的是 jre-8u191-windows-x64.exe FontPruner: https://gulu-dev.com/post/2017/2017-09-15-font-pruner-intro/content 我的使用环境:win 7 64虚拟机 step1:安装 pyt

字蛛的使用及说明

web字体体积大导致加载过慢,对于前端来说是一大需要解决的问题,作为一个前端小白,看不懂文档也是个通病,不过还是花了一些时间和朋友一起研究了这个问题,并找到了解决方案就是"字蛛". 字蛛网站:http://font-spider.orgGitHub源码:https://github.com/aui/font-s... 字蛛简介: 官方的说法 "字蛛是一款中文字体压缩器".字蛛通过分析本地 CSS 与 HTML 文件 获取 WebFont 中没有使用的字符,并将这些字

中文WebFont解决方案Font-Spider(字蛛)

我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅.面对这种问题,我们通常以下方式来进行设计还原: 使用图片背景还原设计,即使用 photoshop 将文本图层单独导出成网页背景图片. 产生的问题 1.    制作与维护成本很高.切图繁琐.高清屏适配繁琐.合并雪碧图更繁琐,后期修改更加繁琐. 2.    用户体验差.导致网页不支持选中.复制.搜索.翻译.矢量缩放,也会影响视障用户使用读屏器操作网页

其他: ----在项目中启用字体压缩

用到的工具: 字蛛 1. 安装字蛛模块 npm install font-spider -g 2. 新建一个html文件,在该文件中通过样式表引入项目中要用的字体,然后在html中放置好你希望展示的所有文字(你项目中会用到的) 3. 执行压缩命令 font-spider + 你的html文件路径 压缩成功后会输出一些信息 4. 拷贝生成的新字体文件到你的项目 字蛛官网: http://font-spider.org/ 原文地址:https://www.cnblogs.com/chenmoumou

用 字蛛 取出需要的字符应用字体

一.安装font-spider npm install font-spider -g 二.目录结构 font-spider font FZZZHONGHJW.ttf font.html 三.font.html内容 <!DOCTYPE html><html><head> <title>方正正中黑简体</title> <meta charset="utf-8"> <style type="text/cs

tool 使用font-spider解决字体压缩问题

开发页面时经常需要使用特殊字体,一个.ttf文件动则几M,字体文件需要优化 http://font-spider.org/ 安装好node环境后 1.全局安装font-spider npm install font-spider -g 2.如果字体不全是写在html中的,那么写个文件用于生成字体 *.ttf文件必须有,其他格式的程序将自动生成 1) getFont.html文件 <!DOCTYPE html> <html lang="en"> <head&

详解node字体压缩插件font-spider的用法

需求: 前端精品教程:百度网盘下载 根据甲方要求,使用UI中指定字体 移动端默认显示系统默认字体,非系统默认字体需要自行引入字体包 字体包过大,字体包通常在几MB,严重拖累页面加载速度 分析: 文本内容为固定内容,不需要更新 文本内容大多为常用文字,大多文字用不上 插件: ? 1 2 font-spider node 安装插件方法:npm install font-spider -g 操作: 安装插件 前端精品教程:百度网盘下载 提取项目文字:创建一个临时html,将所有项目需要用到的文本放到h