TTF字体包瘦身

需求

客户要求首页使用字体,分别为中文和英文格式

首页是基于H5的一个公众号

问题

客户给的字体较大,有两个格式的,分别是中文和英文的.单个都超过了10M,

如果未压缩,因为在首页,访问的次数多,会造成服务器资源紧张,

准备工作

  • 下载好完整版客户提供的的.ttf文件。

  • 下载好font creator字体编辑器。

开始操作

  1. 在font creator中打开完整版字体文件。

  2. 在font creator中新建瘦身版文件。

  3. 在新建瘦身版文件中新建字符。

按照以下步骤执行

可以看到我们刚刚建立的文字.

可以一次性添加多个文字,一二步可以重复操作

4:去完整版字体文件搜索你需要的字,将需要的字复制新建瘦身版文件中

ctrl+f搜索,然后ctrl+c复制

5:复制到我们第三步中创建的空白处粘贴

6:最后导出格式即可

以下是每个字体的区别,这里我们导出woff格式即可

TTF:TrueType

Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理,保证了屏幕与打印输出的一致性。同时,这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。

EOT :Embedded Open Type

EOT是嵌入式字体,是微软开发的技术。允许OpenType字体用@font-face嵌入到网页并下载至浏览器渲染,存储在临时安装文件夹下。

OTF:OpenType

OpenType是微软和Adobe共同开发的字体,微软的IE浏览器全部采用这种字体。致力于替代TrueType字体。

WOFF:Web Open Font Format

WOFF(Web开发字体格式)是一种专门为了Web而设计的字体格式标准,实际上是对于TrueType/OpenType等字体格式的封装,每个字体文件中含有字体以及针对字体的元数据(Metadata),字体文件被压缩,以便于网络传输。

SVG:Scalable Vector Graphics

SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体,还有使用gzip压缩格式的SVG字体。

参考文档.

ttf字体包瘦身,ttf字体包提取指定字体,缩小ttf文件体积。_苛学加的博客-CSDN博客_ttf字体瘦身 ttf瘦身操作

查看字符编码(简体中文) 查看字符编码

### 微信小程序中压缩字体包的方法 #### 使用在线工具压缩字体文件 可以通过一些在线工具来实现字体文件的压缩和优化。例如,在线工具 **Transfonter** 提供了字体格式转换以及子集化功能,能够有效减少字体文件体积[^4]。 ```bash # 访问 Transfonter 官方网站 https://transfonter.org/ # 将 ttf 文件上传并选择需要支持的字符集 # 下载经过优化后的字体文件 ``` #### 转换为 Base64 格式嵌入样式表 另一种方式是将字体文件转换为 Base64 格式的字符串,并将其直接嵌入到 CSS 中。这种方式可以避免额外的 HTTP 请求开销,但也可能导致代码体积增大。因此适用于小型字体文件场景[^2]。 ```css @font-face { font-family: '字体名字'; src: url(data:application/font-ttf;charset=utf-8;base64,把上面转化base64格式复制到此位置) format('truetype'); } .box { font-family: '字体名字'; } ``` #### 利用 `wx.loadFontFace` 动态加载字体 通过调用微信小程序 API 方法 `wx.loadFontFace` 可以动态加载远程字体资源。这种方法适合处理较大的字体文件,因为它们存储于服务器端而非本地打包至应用内,从而节省小程序本身的容量限制[^1]。 ```javascript wx.loadFontFace({ global: true, family: "自定义字体名称", source: "url(https://example.com/path/to/font.ttf)" }); ``` #### 子集化技术减小字体尺寸 对于大体量的字体库来说,仅提取项目实际使用的部分字形是非常有效的瘦身策略之一。这通常涉及手动挑选或者借助专门软件自动分析 HTML/CSS 来决定保留哪些字符[^3]。 --- ###
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值