FontCut - Chrome 字体裁剪插件

最新推荐文章于 2023-07-12 17:43:40 发布
最新推荐文章于 2023-07-12 17:43:40 发布
阅读量469 收藏
点赞数
文章标签： css html js java python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/P6P7qsW6ua47A2Sb/article/details/109088585
版权
FontCut 是一个基于 Chrome 的字体裁剪插件，能实时预览并导出字体子集。本文介绍了字体格式如 ttf、otf 和 woff，探讨了字体的加载顺序与展示时机，以及裁剪原理。此外，提供了项目的GitHub地址，供开发者试用。
摘要由CSDN通过智能技术生成

FontCut-Chrome 字体裁剪插件


「福利」 ✿✿ ヽ(°▽°)ノ ✿：文章最后有抽奖，转转纪念 T 恤一件或转转随机手办一个，走过路过不要错过哦

本文介绍了前端使用字体的一些问题，并介绍了一个基于 opentype.js 实现的Chrome字体裁剪插件，能够实时预览字体，裁剪并导出otf和woff格式的字体子集。

为什么要截取字体？

相对于英文字体，中文字体文字多轮廓复杂，一个文件动辄10多MB。而一些活动页等场景必须要实现富文本。所以我们会将用到的字体裁剪出一个子集。

目前font-carrier，fontkit，fontmin等字体裁剪方案只能借助服务端能力，着实不便。其实这些项目大多也是基于opentype.js的。opentype.js能够在浏览器将 ttf otf woff 三种文件格式解析为一个 font 类，其实字体裁剪在浏览器就能完成。

插件截图

字体那些事

字体格式

ttf 与 otf
最低0.47元/天 解锁文章
大转转FE
关注
FontSubset：:scissors:Chrome字体文件裁剪插件
02-05
字体子集 :scissors: 在Chrome扩展程序中生成字体子集。 入门 建立 运行npm i以安装依赖项。 建立项目 运行npm run build 。 该捆绑包将以dist/结尾。 在Chrome中获取扩展程序以进行开发 导航至chrome://extensions打开“扩展管理”页面。 通过单击开发人员模式旁边的切换开关启用开发人员模式。 单击LOAD UNPACKED按钮，然后选择dist/目录。 发展 基本应用程序组件位于src/app/app.jsx 。 Chrome扩展程序可以由很多部分组成。 该脚手架使您可以使用Preact构建弹出UI 。 资源资源
canvas 插件_FontCut Chrome 字体裁剪插件
weixin_39972519的博客
11-24 124
FontCut-Chrome 字体裁剪插件「福利」 ✿✿ ヽ(°▽°)ノ ✿：文章最后有抽奖，转转纪念 T 恤一件或转转随机手办一个，走过路过不要错过哦本文介绍了前端使用字体的一些问题，并介绍了一个基于 opentype.js 实现的Chrome字体裁剪插件，能够实时预览字体，裁剪并导出otf和woff格式的字体子集。为什么要截取字体？相对于英文字体，中文字体文字多轮廓复杂，一个文件动辄...
chrome浏览器字体编码插件下载
03-15
由于新版chrome浏览器（77以下版本）不能设置字体编码，我找了一个插件和大家一起分享，插件安装的方式自行搜索。 高版本请移步 https://download.csdn.net/download/King_flag/11998490 如果没有积分，请加群获取，群号：835870546
web-font:字体裁剪工具
03-20
网络字体字体裁剪工具 起因 ui需要展现一些特定的字体，但直接约会字体包又过大，于是想到了裁剪字体，一开始想的使用“字蛛”但他是针对静态网站的，而且实际他会多出很多英文的，后来又找到阿里的「webfont」但他的字体有限，项目又不开源，所以自己写了这个 尝试 请注意，由于这个服务器比较差，所以访问可能比较慢，且因为服务器空间问题我会不定时的清空生成的资源，所以请不要使用此站点生成的在线资源，是否需要适当的手动布设 目的与功能 1.裁剪字体包重置仅包含选择的字体 例如如下图生成的字体包仅包含“天地无极乾坤借法” <video src =“ ./ doc_img /功能演示.mkv” controls =“ controls”宽度：100％高度：自动> 其体积自然十分之小 2.另外可以生成css直接复制可用，部署在公网重新永久访问 例如 @font-face { font-fam
字体裁剪，精简字体，字体瘦身：FontSubsetGUI，FontCreator，FontPruner
热门推荐
linxinfa的专栏
03-12 3万+
在 Unity 中制作游戏时，很可能会导入一些外部字体，而从网上下载的字体，小则两三兆，大则十几兆的，这些字体文件既占包体又占内存，所以对动态字体的剥离和精简就很有必要了。 FontSubsetGUI工具 FontSubsetGUI工具下载地址: https://download.csdn.net/download/yaukeywang/10012038 使用方法 准备好一个包含你需要字符的t...
Axure谷歌浏览器插件axure-chrome-extension下载
最新发布
08-02
Axure导出的html文件在浏览器中打不开，是因为浏览器缺少“axure-chrome-extension”插件导致。只需要在扩展程序中安装一个插件“axure-chrome-extension”，就可以解决问题了。
elasticsearch-head-chrome es chrome插件
03-16
elasticsearch-head-chrome es chrome插件 elasticsearch-head-chrome es chrome插件 elasticsearch-head-chrome es chrome插件 elasticsearch-head-chrome es chrome插件 elasticsearch-head-chrome es chrome插件 ...
字体裁剪工具.zip
04-27
由 广州微嵌 出品的一款字体裁剪工具 非常实用 操作简单
字体裁剪工具 游戏开发必备
11-14
字体裁剪 ， 有效剔除无效字体减小字体文件大小！
ttf字库裁剪工具
12-18
嵌入式字库裁剪，适合嵌入式的字库，方便有效！
TTF字体库裁剪&TTC转TTF字体工具
04-05
可以对TTF字体库进行裁剪，保留自己需要的部分字符，从而大大减小字库的大小，适合移动开发。同时支持TTC格式转TTF格式。
vs重构插件原理_FontCut - Chrome 字体裁剪插件
weixin_39880632的博客
12-10 258
本文介绍了前端使用字体的一些问题，并介绍了一个基于 opentype.js 实现的Chrome字体裁剪插件，能够实时预览字体，裁剪并导出otf和woff格式的字体子集。为什么要截取字体？相对于英文字体，中文字体文字多轮廓复杂，一个文件动辄10多MB。而一些活动页等场景必须要实现富文本。所以我们会将用到的字体裁剪出一个子集。目前font-carrier，fontkit，fontmin等等字体裁剪方案...
字体提取简化裁剪工具
前端技术栈
03-04 1337
字体提取简化裁剪工具一、 在线工具裁剪二、 图形工具 FontSubsetGUI工具 一、 在线工具裁剪 地址：https://www.fontke.com/tool/subfont 二、 图形工具 FontSubsetGUI工具 下载地址：FontSubsetGUI工具 教程（可百度） ...
【Unity编辑器扩展】字库裁剪工具, 优化字体文件大小,批量修改文本组件字体
Sun Spark Studio
07-12 2231
需要注意的是，ttf是Unicode编码方式，需要把字符串转为Unicode编码，一个中文占2个字节。2. 扫描工程中使用到的字符集：主要是获取prefab中Text、TextMeshPro的文本，配置表和数据表中的文本，多语言表的文本以及代码中的字符串。3. 支持设置基础字符集文件：把需要强制保留的常用的字符集放进文本文件作为基础字符集，可在编辑器界面由用户选择自定义基础字符集文件。4. 把扫描出的字符集和基础字符集合并，生成裁剪后的字体文件。2. 把字体文件裁剪掉没用到的字符，仅保留项目中用到的字符；
【定制功能】字体裁减工具
Bigan(安)的博客
10-09 1095
LVGL一般都是跑在资源比较紧张的设备上的，所以字段的使用时，应当特别注意把一些不必要的字体给裁减出去。
嵌入式ttf字体裁减说明
u014415274的博客
04-12 5150
裁剪工具包括三个软件 FontCreator:用于添加字符到字库中 Fontmin-v0.2.0:用于查看用到的字符集中在字库中缺少的单个字符。 FontSubsetPack/FontSubsetGUI.exe：用于裁剪只包含所需字符集的字库。 下面以一个实际的例子说明： 比如我所需要建立一个字符集的文本包含以下字符： Mon 월요일 Понедельник Lunes 星期一 Pazartesi Poniedziałek Pondělí 将创建一个文档----string.txt.将文本复制到
Unity字体裁剪与增加
qq_40833062的博客
02-28 524
我们常常发现若干个小则两三兆，大则十几兆的字体文件，这些文件既占包体又占内存。因此，对字体的合理使用和优化已经成为项目中后期优化必不可少的一个步骤。 优化效果：优化内存占用。 解决方案：字体精简，裁切。 推荐工具：FontPruner FontSubsetPack High-Logic FontCreator 工具链接：https://www.cnblogs.com/yaukey/p/compare_fontsubsetgui_fontpruner_for_unity.html htt
前端对UI设计的特殊字体的处理
weixin_34416754的博客
02-14 1244
背景 UI在设计的时候针对某部分需要特殊展示的可能采用了特殊的字体。比如下图中的统计的数字，这个数字的字体在页面中用到的范围有限，只在统计的地方用到了字体中的数字。 解决方案 类似这种的固定的可以让UI切一张精灵图，前端自己拼起来； 将单个数字上传到iconfont上，前端下载字体文件后使用的时候再拼起来； 引入数字所用到的字体，引入后前端再使用； 对原字体进行裁决，只保留字体中的数字。然后再...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值