web前端开发字体包 WebFont字体文件压缩

我爱编程网小编给大家带来了web前端开发字体包 WebFont字体文件压缩相关文章，一起来看一下吧。

web前端中引入的字体文件过大如何解决?

要动态切换就做不到了。鱼和 熊掌 不能兼得。

一般缩小网页字体文件的方法就是把用到的那几个字单独的提炼出来。就是用不到的字不要放在字体文件里。需要你自己做一个字体文件。因为以前有写过一个类似的工具，就是把字体中的字提炼出来。后来不干这个了，文件也没了。这是一个常用的工具，你在网上自己找一找应该能找到很多类似的开源项目。我当时用的方法是字库文件比如ttf转换成svg字库，然后通过对应的字码调用相应的svg矢量字库，然后删除不需要的字体之后，再把svg转换成woff，eot，ttf等字体的方式。
例子的话现在就没有了。我只能给你说一下思路。希望对你有帮助。
——
像你提供的这个，如果就是一个展示，那么你完全可以用上面的所说的方法把需要的那几个字从字体文件里提出来，比如《字由棒棒体》，把那个字体提炼出来。
但是你要动态实现收入字体立马就变，这种提炼方式就不方便了。更快的的方式就是把每一个字分别做成单独的svg图形，这样利用一个字体对应svg字体，就可以不必一次性下载那么大几个M的文件了。毕竟一个字的SVG是很小的。
还有其他方案就是所有的字体做了CDN加速，本身字体文件虽然很大，但是几个M的文件如果通过提高 网速 ，也不是实现不了。这个就是技术解决不了，用钱来凑了，毕竟CDN加速也是很贵的。

我爱编程网

WebFont字体文件压缩

@font-face 对CSS3来说，现在已经不是很陌生了，页面上的很多图标都是通过字体展示出来的。但是呀，很多设计师为了页面整体好看，就喜欢用一些特殊字体，英文字体也就算了，也就26个字符加标点符号就是了，一个字体文件也不大。中华文化博大精深，岂是26个汉字能搞定的？所以中文字体库一般都是十几兆，如果将整个字体库引入到页面中，页面加载速度很受影响。为了按需加载，将页面上用的汉字提取出来，重现生成一个只有需要用的字符的字体库，这样文件会小很多。在很久之前，我们通过手动的方式来制作字体库的，具体可以查看 网络字体@font-face，如何处理网页中的特殊字体？ 。这样的手工作业方式很麻烦，于是大神们出现了很多工具。

最近有一个业务功能，要求客户端传来要用到的文字和字体，返回一个整理后的字体文件。

通过搜索呢，发现有 sfnttool.jar (Java)， Fontforge (Python)， Font Optimizer (Perl)，但是老子不会这些语言，继续搜索，发现了 font-spider —— 一款NodeJS编写的工具，这个俺会。

github

font-spider是通过读取HTML文件，自动检测网页中引用的字体和文字，来生成字体文件。具体的使用基础教程可查看 font-spider 前端开发字体的好工具 。

如果写一个后端接口，总不能先生成一个html文件，再运行命令吧，这样不是很合理。那就看看它的package.json，看看他的依赖包是不是有核心功能的工具。

gulp、css、browser-x等不相关的排除掉，只剩下fontmin了。

搜索一下，发现fontmin( 官网 )正是我所需要的。

github

fontmin提供了客户端、提供了命令行、也提供了NodeJS调用的方式。通过github中的package.json可以知道，核心的功能是通过fonteditor-core模块实现的。

fontmin客户端的使用基础教程—— 特殊字体神器-fontmin，秒杀一切工具 。

Node的使用基础方式：

web前端开发都有哪些常见的工具？

要知道，无论是对于软件开发程序员还是说前端编程设计师，每个人手里都会有大量的资源和工具来使用的。那么职场新人又如何来积累自己的工具与资源呢?下面，我们就给大家分享了web前端开发的常见工具，一起来了解一下吧。

Brandy

Brandy是一款适用于macOS平台的品牌素材管理工具，你可以使用它来创建LOGO，管理字体和色彩，制作效果。一切都是实时呈现，一个帐号可以管理任意数量的品牌项目。此外，它还可以通过托拽来管理制作，非常方便。

Picular

如果你想搜一个特定物品的色彩，要怎么办?Picular这款工具就是这样一个神奇的工具，你输入特定的单词或者短语，它就能给你输出这个东西对应的色彩。它的工作原理并不复杂，它会通过你的关键词获取图片，然后输出物品本身综合呈现出来的单一色彩，如果你将色彩悬停在色彩之上，能够看到源图片。

Drawser

Drawser是一个在浏览器中运行的矢量图形工具，你能够直接在屏幕上绘制和编辑，内含丰富的交互功能，你甚至能够和他人协作来绘制矢量图片。Drawser还包括社交模块和社区，用户能够发布项目，并且在开源项目中针对这些已经发布的图片素材进行编辑和优化。

RSSHub

RSSHub是一款轻量级的RSS聚合工具，几乎可以从任何网站服务中获取数据，非常简单易用，可以实现无缝的订阅体验。

SVGFilters

SVGFilters是一个非常有趣的SVG游乐场，简单的点击几下，你就能添加不同的效果。切换不同的设置，能够改变图片上的效果。生成的SVG文件之后，直接复制相应的代码即可使用。

CodeSurfer

CodeSurfer是一款用于滚动、缩放和显示代码的React组件。你可以突出显示单行代码或者多行代码，缩放长片段，等等。

ShrinkMe

ShrinkMe是一款图片压缩应用，可以在几秒钟内帮你完成图片压缩的工作。将图片拖到界面中，就可以获得可下载的、压缩过的图片。这款工具可以离线使用，一次压缩多个文件。

Fake3DEffect

3D效果真的一定需要通过建模来实现嘛?不一定!你可以借助这款工具制作出模拟的3D的效果和应有的视觉纵深，直接呈现，无需花俏的设备就能实现。

Splitting

Splitting可以帮你使用CSS来创建时尚的文本分割效果。通过创建元素并添加CSS变量的方式，你就能够实现。它足够轻量级，易于使用，并且附带专门的文档说明。

Tutorial:AdvancedEffectswithCSSBackgroundBlendModes

BennettFeely在这个教程中，介绍了如何使用不同的CSS属性来创建混合的背景对象，教程的核心也是关于背景的混合模式。

Food&DrinksIconSet

这是一组包含60个美食和饮料的图标合集，每个图标都包含有线性图标和彩色图标不同的版本和样式，下载这些矢量的图标，开始使用吧。

GradientIcons

GradientIcons是一组100个包含时尚渐变样式的不同类型图标，则组图标的付费版本中包含有1000个图标，不论免费版还是收费版都非常给力了。

EmojiOne4.0

EmojiOne4.0是一款在2023年重新设计过的表情符号系列，它是根据当下的设计趋势来重设计的，带有微妙的渐变和干净的界面。

BestAnimatedLogos

BestAnimatedLogos是一组高素质的动态图标，这组图标涵盖了Google到Tumblr等著名的企业的LOGO，非常值得学习。

HeardatWork

HeardatWork搜集了工作者们工作期间的真实的表达，这些人大都来自诸如纽约某个设计工作室，有趣，真实，甚至有点沙雕。这个项目是由JustineBraisted所创建的。

TheCarltonDance

TheCarltonDance是一个非常经典也令人发笑的舞蹈，电脑培训发现它源于90年代某个情景喜剧中的角色，有人将它制作成为一个纯CSS的动画，感兴趣可以看看~

NerdRobe

NerdRobe是一个专门为设计师设计各种极客衬衫的服务，它每周都会提供新的设计，可以说是对生活的一个非常不错的补充。

以上就是我爱编程网小编给大家带来的web前端开发字体包 WebFont字体文件压缩，希望能对大家有所帮助。