开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何从ttf / woff文件中仅导出一个字符，以避免加载不必要的文件大小？

从ttf / woff文件中仅导出一个字符，以避免加载不必要的文件大小，可以通过以下步骤实现：

字符提取：使用字体编辑工具（如FontForge）打开ttf / woff文件，选择要导出的字符，然后导出为新的ttf / woff文件。
字体子集化：使用字体子集化工具（如pyftsubset）将新的ttf / woff文件进一步优化，只保留所需字符的字形数据，删除其他字符的字形数据。这样可以大大减小文件大小。
字体压缩：对新的ttf / woff文件进行压缩，以进一步减小文件大小。可以使用压缩工具（如Zopfli）对文件进行无损压缩，或者使用压缩算法（如Brotli）对文件进行有损压缩。

通过以上步骤，可以从ttf / woff文件中仅导出一个字符，并且减小文件大小，从而提高加载速度和性能。

推荐的腾讯云相关产品：腾讯云字体库（Tencent Cloud Font Library）

腾讯云字体库是腾讯云提供的一项云计算服务，用于存储和管理字体文件。用户可以将自定义字体文件上传到腾讯云字体库，并通过API调用实现字体文件的动态加载和使用。腾讯云字体库支持字体子集化功能，可以根据需求提取和压缩字体文件，以减小文件大小和提高加载速度。

产品介绍链接地址：https://cloud.tencent.com/product/tcf

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Web 中文字体性能优化实践

在字体的定义中，轮廓是由一个个位置点构成的，并且每个位置点具有编号，这些编号从0开始按升序排列。因此我们读取指定的字形就是读取 Glyph Headers 中的各项值以及轮廓的位置点坐标。...如果用上面的方法，每一个截取后的字体以 base64 字符串形式存在，则可以在服务端做一个缓存，就没有这个问题。...减小字体文件体积的优势下面附上字体截取后文件大小和加载速度对比表格。可以看出，相较于全量加载，对字体进行截取后加载速度快了145 倍。...fontmin 是支持生成 woff2 文件的，但是官方文档并没有更新，最开始我使用的 woff 文件，但是 woff2 格式文件体积更小并且浏览器支持不错字体名称大小时间 HanyiSentyWoodcut.ttf...在浏览器的字体显示行为中存在阻塞期和交换期两个概念，以 Chrome 为例，在字体加载完成前，会有一段时间显示空白，这段时间被称为阻塞期。

1.9K1 0

(转载非原创)前端网页字体优化指南

日常开发网页经常会使用一些特殊字体，比如思源黑体、苹方字体等，因为这些字体在一般的宿主环境中是不存在的，需要通过 css 的 @font-face 定义，并从服务器中加载对应的字体文件，而字体文件一般都是比较大的...可是很多时候美术同学只提供其他格式的字体文件给我们，比如 TTF 或 OTF，那如何将其转换成 woff2 呢？...OTF 转 WOFF2 除了 TTF ，美术同学还经常提供 OTF 给我们，这是微软和 Adobe 共同研发的字体，因此在 windows 平台还是比较流行的。那如何将其转换成 WOFF2 呢？.../myfont.woff2') format('woff2'); } body { font-family: myfont; } 假如这个 myfont.woff2 文件大小为 4M，而网络下载速度只有...下面来看一下如何使用: 在 css 中通过 @font-face 定义一个字体： @font-face { font-family: 'myfont'; src: url('.

1.2K0 0

让你的网站用上炫酷的中文字体

由于字符集小，字体文件也可以做的非常小；中文字体就完全不同，单单 GB2313 编码的中文字符（含符号）就达到 7445 个，字符数量是 ASCII 码表的 58 倍，而字体设计师需要为每一个中文字符设计字体...，简单计算下，中文字体文件大小也几乎达到英文字体文件的数十倍。...02 解决思路解决思路其实也很简单，只在字库中保留页面中出现的文字，将其他大量不用的文字删掉，生成一个只包含特定字符的小字体文件，便可以大大减少字体文件，从而提高访问速度。...主要思路是采集线上网页使用到的字体，从字体文件中分离出来，完成大幅度压缩。另一个是腾讯的大佬改版后的 font-soider，叫 font-spider-plus[2]。它们的工作原理如下： ?...base64 编码灵机一动，想到了 base64，编码之后可以不用拷贝这些字体文件，还能减少网站字体的加载体积，真是一箭双雕啊！具体的步骤我就不解释了，直接把所有步骤放到脚本中： #!

2.5K2 0

前端字体截取技术，做炫酷网站再也不用怕中文字体数据量大啦！【实战】

可是中文字体非常庞大，很多时候“全量”加载某个字体文件是不现实的。特别是对于一些动态页面且每个页面只有少量字符用到该字体的情况下。...当然，也不是每个页面都会用到一个字体文件中的所有字符，全量加载本身也极其浪费。...它类似于一种快捷方式，而不能真正减少浏览器需要下载的字体文件大小。...假设不删除上述码点，而直接在标点左侧输入一个自定义字体中并不包含的字符，Chrome会强制把这个字符显示成自定义字体。看来浏览器的实现还是有不一致的地方。...无论如何，我们可以再定义一个只包含逗号和句号两个字符的自定义字体来解决这个问题： @font-face { font-family: punc; src: local(PingFang SC);

2.5K2 0

Bootstrap里的文件分别代表什么意思及其引用方法

关于Bootstrap打包的文件分别代表什么意思，官网也没有给出一个明确的解释，本吊在网上查了一些资料，总价归纳了如下： bootstrap/ ├── css/ <!...，所以文件大小会比bootstrap.css小，可以在部署网站的时候引用，如果引用了这个文件，就没必要引用bootstrap.css了，下面的文件同样。...、bootstrap.min.js这两个文件放入HTML网页的最底部，这么做是为了防止网页未加载完毕而这两个文件先加载可能产生的不必要的问题。...WOFF – Web Open Font Format (.woff) WOFF（Web开发字体格式）是一种专门为了Web而设计的字体格式标准，实际上是对于TrueType/OpenType等字体格式的封装...SVG字体就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体。使用方法：使用CSS3的@font-face属性可以实现在网页中嵌入任意字体。

1.7K0 0

【腾讯云前端性能优化大赛】前端首屏性能优化

压缩图片的网站推荐 https://tinify.cn/，方便好用，也可以接入API自动化。 2.3、字体文件压缩一个完整的字体文件（这里指ttf后缀的字体文件）往往非常大，几百kb甚至几mb。...一个业界比较常见的字体文件压缩方案是通过字蛛，将字体文件拆分。...WOFF 字体均经过 WOFF 的编码工具压缩，文件大小一般比 TTF 小 40%，加载速度更快，可以更好的嵌入网页中。...所以我们在打包项目的时候，要尽可能的减少不必要的内容引入。...对于SW的介绍、基础用法和常见API，可以参考MDN上的SW的使用教程。本文这里直接从使用说起，如何接入项目进行使用。

1.6K4 1

TTF、TOF、WOFF 和 WOFF2 的相关概念

前言在上一篇文章中，我引入了 TTF 格式的字体文件来解决各平台字体表现不统一的问题。...OTF 的主要优点有：增强的跨平台功能；更好的支持Unicode标准定义的国际字符集；支持高级印刷控制能力；生成的文件尺寸更小；支持在字符集中加入数字签名，保证文件的集成功能。...这个字体格式使用zlib压缩，文件大小一般比 TTF 小 40%。...总结通过上面的概念，可以看出： TTF 的兼容性更好，但是其字体文件体积最大。 WOFF 字体比 TTF 字体有更小的体积和更好的表现性。 WOFF 2 字体是对 WOFF 字体的升级。...所以，如果不考虑兼容性的话，字体使用首推 WOFF 2 ，这也是我在文章开头说使用 TTF 并非最优解决方案的原因，大家可以根据自己的实际情况，酌情选择合适的字体文件，以达到性能优化的目的。

1.5K3 0

CSS使用字体新姿势 unicode-range用法与使用场景

我试着加载了一个8M左右的字体文件，测试下来需要50多秒差不多1分钟才能加载完成。...可以看到使用的WOFF2的字体文件，WOFF字体自带压缩功能，所以会比通常的TTF字体文件更小，WOFF2则在WOFF的基础上更进一步压缩，所以实际的体积应该会更小。...还有就是在这个样式文件中，多次使用@font-face规则定义同一个字体ZCOOL KuaiLe，但是每一个使用的src资源都不一样，我想到的就是分片，把一个字体文件拆分成多个细小的文件，然后利用游览器并行下载来提升加载速度...两个字体文件中都有鹿这个字符，但是这里的鹿字显示的是第二个规则中的字体，所以如果多个@font-face规则中有重复的字符，以最后的为准最后我的个人猜测：谷歌字体访问这么快的原因是把字体按照字符类型拆分开来...，比如英文拆分为一个字体文件块，标点符号啥的拆分为一个块，然后只有当网页有命中条件以后才会加载相应的字体块，一些特殊的字符啥的拆分为一个块，这时比如一些特殊字符一般网页很少用的，既可保证特殊字符的正常加载

2.2K1 0

想要字体图标设计师却给了SVG？没关系，自己转

本文为Varlet组件库源码主题阅读系列第三篇，读完本篇，你可以了解到如何将svg图标转换成字体图标文件，以及如何设计一个简洁的Vue图标组件。...文件都会转换成上面的一个glyph元素，所以上面这段svg定义了一个名为geniconsfont的字体，包含两个字符图形，我们可以通过glyph上定义的Unicode码来使用该字形，详细了解svg字体请阅读...；在css中，格式为\hhhh，以反斜杠开头；在js中，格式为\uhhhh，以\u开头。...，遍历所有svg文件，从文件名中取出图标名称和图标代码。...这个约定是svgicons2svgfont规定的：如果我们不自定义图标的Unicode，那么会默认从E001开始，在Unicode中，E000-F8FF的区间没有定义字符，用于给我们自行使用private-use-area

1K1 0

web字体规范

，作为一个”应变”制度，以确保浏览器/操作系统之间的最大兼容性。...如果浏览器不支持的第一个字体，它尝试下一个的字体。...补充浏览器对字体文件的支持情况浏览器支持类型 IE6,7,8 仅支持 Embedded OpenType(.eot) 格式 Firefox 3.5 支持 TrueType、OpenType...、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式字体文件：找到系统中的字体文件，提供给前端，最好是ttf格式的。...四其他版权问题，设计以及其他相关部门可以使用的字体如下,避免不必要的版权问题。

2.7K4 0

webpack处理ttf字体文件报错的方法

webpack处理ttf字体文件报错的方法我们在使用webpack打包的时候经常因为引入ttf字体报错而烦恼,这里解决ttf字体报错的方法需要加入一个url-loader,没有的话需要npm先安装下:...(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理字体文件的 loader 完整的webpack.config.js如下: // 由于 webpack...，同时自动把打包好的bundle注入到页面底部 // 如果要配置插件，需要在导出的对象中，挂载一个 plugins 节点 var htmlWebpackPlugin = require('html-webpack-plugin...') // 当以命令行形式运行 webpack 或 webpack-dev-server 的时候，工具会发现，我们并没有提供要打包的文件的入口和出口文件，此时，他会检查项目根目录中的配置文件...(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理字体文件的 loader { test: /\.js$/, use: 'babel-loader

4.1K2 0

Web使用HarmonyOS字体的压缩方案

网页加载速度的影响如果需要全站使用同一种字体，那么我们或许需要同时加载 Regular、Medium、Bold 等不同字重的字体文件，这里给一个参考： HarmonyOS_Sans_SC_Regular.ttf...文件大小高达 8068KB，注意，这仅仅是 Regular。...所以，如果不对字体文件进行压缩，将其作为 Web 字体是不合理的，这将极大拉缓网页加载速度，严重影响用户体验。字体压缩 FontTools What is this?...如何压缩借助以上工具，我们可以将 unicode 分为多个片段来对字体文件进行压缩：字符集字数 Unicode 编码拉丁字母 -- 0000-007F,0080-00FF等基本汉字 20902...字 4E00-9FA5 中文字符 -- 3002,FF1F等我们只需要对这两万多个基本汉字进行分段即可，至于数字、拉丁字母等，其实并不会过多影响字体文件大小。

1.1K3 0

移动端引入的字体文件过大处理方法

一.背景前端开发的同学,我们经常会碰到需要还原设计稿中的特殊字体.这时,我们可能会采用两种方案 1.使用photoshop将文本图层单独导出成图片;　　2.直接引入改字体的字体库.ttf文件　　首先第一种方案的缺点...第二种方案,解决了上述的一些问题,但是由于汉字数量太大,导致中文字体文件也较大,通常都会有几M大小,不适合在项目中使用.尤其是移动端项目,由于字体加载速度很慢,体验会十分不好.本篇博客将介绍两种自动化工具...三.Font-Spider(字蛛) 字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。...WebFont中没有使用过的字符,这样一来,对于动态生成的文字,就没有办法使用font-slider了.这是个坏消息!...使用fontmin可以按需提取字体中的部分字型，最小化打包字体，自动生成 WebFont 字体文件（ttf/woff/eot/svg）和 CSS 文件, 并可利用 @font-face 将自定义字体呈现到网页中

7.4K22 0

2020前端性能优化清单（二）

Sketch 内置支持 WebP，而 Photoshop 可以使用的WebP 插件[15]从 Photoshop 导出 WebP 图像。...另外，您还可以使用多背景图像技术[55]来提高图像的感知性能。请记住，调整对比度[56]和模糊不必要的细节（或消除颜色）也可以减小文件大小。嗯，如果您需要放大一张小照片而不损失画质吗？...例如，您可以使图像的不必要部分模糊（通过应用高斯模糊滤镜）以减小文件大小，最终您甚至可以删除颜色或将图片变成黑白以进一步减小大小。...对于背景图像，在 Photoshop 中以 0 到 10％的质量导出图片也是绝对可以接受的。...否则，字体加载将在第一次渲染时就耗费您的时间。有选择性地[88]选择最重要的文件是一个好主意，例如，那些对渲染至关重要的文件，或者那些可以帮助页面提升可见性的和避免破坏性文本重排的文件。

1.6K1 0

记一次使用 fontTools 优化网页字体（字体文件大小）

一直以来，本站使用的是 HarmonyOS Sans 字体，但由于中文字体文件过大（约 4.3 MB），导致网页加载速度缓慢，不利于弱网环境下的访问。...因此，本文将介绍如何使用 fontTools 中的 pyftsubset 对网页字体进行切片，以优化网页字体文件大小。...设置环境变量 export PATH=$PATH:/root/woff2/out 使用方法上传字体文件新建一个文件夹，将需要切片的字体文件放入其中： mkdir fonts cd fonts 切片并转换为...woff2 格式本文使用的是 HarmonyOS Sans 字体，字体文件名为 HarmonyOS_Sans_SC_Regular.ttf，使用以下命令进行切片：注意： 1.如您使用的是其他字体，..._compress HarmonyOS_Sans_SC_Regular.21.ttf 对应的 CSS 样式文件注意：如您使用的是其他字体，请将代码复制到编辑器，并将 CSS 中的 HarmonyOS_Sans_SC_Regular

7321 0

入门webpack的最佳实践（基于webpack4.X 5.X）--基础篇

css-loader的作用是识别css文件中的@import语句，以及url链接等，并将css文件中的样式编译为js模块，并导出，而style-loader的作用就是将导出的样式模块以style标签的方式插入...DOM树中支持加载图片 file-loader: 解决CSS等文件中的引入图片路径问题，不使用的话，样式中的url路径打包后会参照html，而不是css文件。...类似的 raw-loader 功能. asset 会根据文件大小来选择使用哪种类型，当文件小于 8 KB（默认）的时候会使用 asset/inline，否则会使用 asset/resource 加载图片...loader使用了use+loader的写法，这样写我们可以给loader传递参数，放入配置对象的options属性中，比如在上面的代码中，传入了文件大小和输出路径两个参数。...(woff2?|eot|ttf|otf)(\?.*)?

3984 0

入门webpack的最佳实践(基于webpack4.X 5.X)--基础篇

的作用是识别css文件中的@import语句，以及url链接等，并将css文件中的样式编译为js模块，并导出，而style-loader的作用就是将导出的样式模块以style标签的方式插入DOM树中支持加载图片...(gif|jpg|png|bmp|eot|woff|woff2|ttf|svg)/, use: [ { loader...类似的 raw-loader 功能.asset 会根据文件大小来选择使用哪种类型，当文件小于 8 KB（默认）的时候会使用 asset/inline，否则会使用 asset/resource加载图片loader...使用了use+loader的写法，这样写我们可以给loader传递参数，放入配置对象的options属性中，比如在上面的代码中，传入了文件大小和输出路径两个参数。...(woff2?|eot|ttf|otf)(\?.*)?

5906 0

webpack超详细教程！入门一篇就够了

就会解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中，导出的配置对象当 webpack 拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建如果 webpack...处理，这种文件类型在调用 loader 的使用，是从后往前调用的当最后一个 loader 调用文件，会把处理的结果，直接交给 webpack 进行打包合并，最终输出到 bundle.js 中去 10...url 的形式进行传输，否则图片就会被转为 base64格式的字符串进行传值而后面的 name 参数是对客户端浏览器中的文件名进行设置，会将浏览器中图片文件名设置成路径中一样的文件名，因为经过上面的步骤只会将图片的路径设置成...ttf、 eot、 svg、 woff、 woff2 进行配置 14 处理 ES6 的高级语法在 webpack 中，默认只能处理一部分 ES6 的语法，一些更高级的 ES6 语法语法或者 ES7...，则可以不再 {} 中定义它导出的成员，必须严格按照导出时候的名称，来使用 {} 按需接收，但可以使用 as 来起别名 17 如何在 webpack 使用 vue-router 17.1 安装 npm

8.6K5 2

vue项目部署的最佳实践

前言使用vue、react、angular等技术开发过程中，我们都会遇到以下问题：首屏加载慢每一次更新都需要清除浏览器缓存才能看到效果(经常被测试吐槽) 这两个问题可以从很多方面进行优化，今天我就从前端页面部署阶段来优化一下这两个问题...前端页面文件缓存方案从vue-cli3打包说起路由使用按需加载后，打包生成的文件，每一个路由页面都对应一个js和css文件，入口main.js及其依赖则打包成了app.js和app.css，公共依赖都放到了...那么字体文件呢，是不是和图片一样？从阿里巴巴矢量图库生成的图标字体的css中我们可以看出，一般常见的字体文件有：eot、woff、ttf、svg，另外woff2是以base64的格式存储的。...('woff2'), url('iconfont.ttf?...结论：svg、eot 和 ttf 这三种格式的字体文件可以使用CompressionWebpackPlugin进行压缩，并且配合Nginx的gzip_types配置，woff和woff2格式的字体文件不需要

1.6K1 0

微前端框架qiankun项目实战（二）--踩坑与部署篇

token存到localStorage的逻辑，并编写了一个Vuex的storagePlugin插件，该插件主要功能是在应用加载的时候去获取localStorage中的token，如果有的话直接commit...我们只需要拷贝iconfont.css、iconfont.ttf、iconfont.woff、iconfont.woff2这几个文件到src/assets目录下，然后在main.css引入就可以了 iconfont.css...我们明明一个有心有个无心！如何解决？...官方提供了基于shadowDom的样式隔离方案，不过似乎还是未做到完全的隔离，同类名的情况下可能还是会出现冲突，所以我们尽量通过不同类名，添加前缀的方式去避免样式冲突，或者是把类名降级放到一个父类中去避免样式冲突...，这里我们不用那么麻烦，vue-cli帮我们做好了，我们在根目录添加.env.production、.env.development文件,这两个文件就是用来导出一些变量，顾名思义这些变量分别用在dev和

1.7K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭