本文作者：IMWeb forsigner 原文出处：IMWeb社区 未经同意，禁止转载 字体子集化，在线提取你需要的字体。
昨天我测试字体的时候用过有字库，有字库就是一个典型的webfont，我就在想有没有跟有字库差不多的webfont引用方式，不直接引用整个字体，而是引用需要用到字，终于，我在GitHub上找到了这个15年的项目Fontmin...，我直接下载了他的客户端，Fontmin提供了Mac os & Windows客户端。
Fontmin 第一个纯 JavaScript字体子集化方案，一个百度出品的优秀工具。 Fontmin 有什么用呢？...Fontmin 用法 Fontmin 的用法很简单： var Fontmin = require('fontmin'); var fontmin = new Fontmin() .src('fonts.../ 基于 Fontmin 的工具 fontmin-app - Fontmin 桌面版 App，需下载安装使用 gulp-fontmin - Fontmin 的 Gulp 插件 font-spider -...Web-fontmin 不是什么高大上的东西，一个基于 Fontmin 构建的字体工具，它的用处只有两个： 提取字体 字体格式转换 通俗的理解，Web-fontmin 是一个这样的工具：Squirrel...Web-Fontmin 拥有Fontmin-app的所有功能，并且在线即可用。
fontmin 为何力荐fontmin？ 方便，快捷~！不需要自己手动抠文字，直接生成各类文字字体，而且代码也可以直接生成。...fontmin的特点 子集化（只取用当前字体中的部分文字）后的字体删掉了所有没用空字符，不需要另开fontcreator进行二次精简 无论原字体的映射怎么乱七八糟，子集化后的映射平台自动改为两个必要的unicode...fontmin下载 fontmin官网：http://ecomfe.github.io/fontmin fontmin的具体操作 1 打开软件（无需安装，打开即用） 2 输入需要采用特殊字体的文字 3...关于fontmin的建议 1 个人建议采用英文的名称命名字体，而不要采用中文（一出现中文就很有可能出现乱码问题）。...这个并不属于软件bug，fontmin会完整保留第一个空字符所有映射，因此可能导致与后来改的字符映射产生冲突，而在移动设备无法正常显示。
四.使用Fontmin Fontmin 是由百度推出的一个字体子集化方案。...Fontmin 提供了 Node.js 模块和客户端 2 种使用方法,下面主要介绍Node.js模块的使用,更多使用请移步到Fontmin快速指南 1.安装fontmin npm i -g fontmin...2.配置 在项目中创建fontmin.js var Fontmin = require('fontmin'); var srcPath = 'font/*.ttf'; // 字体源文件路径 var...()) // woff 转换插件 .use(Fontmin.ttf2svg()) // svg 转换插件 .use(Fontmin.css())...建议还是使用node模块的方式, 只要在项目中配置好, 以后再有任何文字需要使用字体, 直接添加到fontmin.js中的text中,执行node fontmin.js命令就搞定了. 4.缺点 Fontmin
CSS unicode-range特定字符使用font-face自定义字体 fontmin fontmin 是一个纯 JavaScript 实现的字体子集化方案。...fontmin 截取字形原理 fontmin 内部使用了 fonteditor-core，核心的字体处理交给这个依赖完成，fonteditor-core 的主要流程如下： ? 1....fontmin 使用方法 在了解了 fontmin 的原理后，我们就可以愉快的使用它啦。...利用 fontmin 生成字体子集代码如下： const Fontmin = require('fontmin') const Promise = require('bluebird') async...function extractFontData (fontPath) { const fontmin = new Fontmin() .src('.
最终找到了fontmin这个插件。这个插件的原理是将字体文件中的字符集进行筛选，生成的新的字体文件中，只包含要使用到的文字字符集。...3.2 安装 fontmin 这里不推荐全局安装，在项目里面安装即可。 npm install fontmin -D 然后编写配置文件。这里我是写在项目根目录的。...// fontmin-config.js var Fontmin = require("fontmin") var srcPath = "..../src/assets/font-output/" // 输出路径 var text = "0" // 筛选的字符集 var fontmin = new Fontmin() .src(srcPath...) // 输入配置 .use( Fontmin.glyph({ text: text }) ) .dest(destPath) // 输出配置 fontmin.run
使用工具 fontmin http://ecomfe.github.io/fontmin/en#source 该工具可以方便的实现字体压缩，从字体源文件内提取目标字体作为一个新的字体文件。...var Fontmin = require('fontmin'); var fontmin = new Fontmin() .use(Fontmin.glyph({ text:...说下整体实现思路 确定你的词库（要进行加密的内容） 确定字体源文件 如微软雅黑 使用fontmin生成目标字体文件 将目标字体文件转换为svg格式 确定加密规则 对svg文件内的unicode进行加密算法处理...使用fontmin 将 svg转换为目标格式 eot、woff、ttf 字体 最后便是定义font-face，定义font-family class。
用法及查看已收录的gulp插件 gulp.js中文文档 参考了Gulp压缩的基本方案 Butterfly主题文档-Gulp压缩 参考了gulp的优化方案 卓越科技-如何优化博客 参考了小魏找到的字体压缩方案 小魏-fontmin...&&hexo 字体压缩 gulp-fontmin的使用文档 gulp-fontmin 写在最前 gulp能够帮助用户自动压缩静态资源，配合各类下属插件，能够压缩包括css、js、html乃至各类格式的图片文件...fontmin 可以遍历博客内用到的字符，并将字体包内这些字符的字体样式提取出来输出为新的字体包。...font-min 仅支持压缩 ttf 格式的字体包 npm install gulp-fontmin --save-dev 为 Gulp 创建gulpfile.js任务脚本。.../public/fonts/*.ttf') //原字体所在目录 .pipe(fontmin({ text: text })) .pipe(gulp.dest('.
install gulp-clean-css --save-dev # 压缩css npm install gulp-terser --save-dev # 压缩js npm install gulp-fontmin...var htmlmin = require('gulp-html-minifier-terser'); var htmlclean = require('gulp-htmlclean'); var fontmin...= require('gulp-fontmin'); var uglify = require('gulp-uglify') var babel = require('gulp-babel') //压缩.../public/fonts/*.ttf') //原字体所在目录 .pipe(fontmin({ text: text })) .pipe(gulp.dest('.
由于中文字体包都很大不利于WEB环境，这里我们需要使用 Fontmin，从字体包里提取出我们要使用的首先找到一款你想要的字体，我这里用的萝莉小猫咪体。...由于中文字体包都很大不利于WEB环境，这里我们需要使用 Fontmin，从字体包里提取出我们要使用的字体。...href="https://blog.slienca.top/go/aHR0cHM6Ly9lY29tZmUuZ2l0aHViLmlvL2ZvbnRtaW4vI2FwcA" type="default"]下载Fontmin
基于悟空微组件动态打包上线方式，我们选择使用 fontmin 来完成动态压缩字体。 动态压缩字体分为以下几个步骤： 第一步，读取特定配置文件中的 id，预先请求到对应页面接口数据，进行数据归集处理。...dist/${siteId}/font/${fontName}.ttf`; const destPath = `dist/${siteId}/compressFont`; const fontmin...= new Fontmin() .src(srcPath) // 输入配置 .use(Fontmin.glyph({ // 字形提取...text: fontText // 动态注入文字 })) .use(Fontmin.ttf2eot()) // eot转换 .use(Fontmin.ttf2woff...()) // woff转换 .use(Fontmin.ttf2svg()) // svg转换 .use(Fontmin.css({ fontPath:
经过我长时间的审问，一位不愿透露姓名的网友终于透露出他用到精简字体库的工具 Fontmin 有客户端，也可以直接使用终端操作。 客户端也提供了mac和windows两个版本，操作起来非常简单。...Fontmin官网 Fontmin github地址 代码仓库 本文完整代码可通过下方链接获取。 ⭐ Fabric.js 使用自定义字体
font-face {\ font-family: tencentFont;\ src: url('https://node.video.qq.com/x/services/fontmin
建议本文搭配 使用Fontmin生成WebFont压缩字体 食用更佳 今天看到主题作者主页大标题用了这个字体，我一想哇还挺好看，也想自己整一个，看了看主题设置并没有更改字体的设置，只有头部标签引用,又回头看了看原页面
如果有用到其他字体的话，一款普通的中文字体大大几十M，但是我们使用字可能就是那么几个，所以字体提取也很有必要，其实社区内有收费的插件，但是目前中文字体提取库无非就是Fontmin或者字蛛，它们都可以可以通过终端命令或者客户端和...fontmin_tool 资源远程加载 既然本地放不下了，那就把资源放在远端吧。
比如前nodejs时代的各种GUI工具，nodejs时代的fontmin、font-spider（字蛛）... 目前来说，最方便的要数font-spider（字蛛）了，发布的时候也震惊中外。
("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff");}压缩字体但是字体文件ttf比较大，所以我找到了「fontmin
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
