文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

网页特殊字体过大的优化

html网页引用中文字体，文件过大，加载缓慢的解决办法 解决办法： 一、字蛛 原理 爬行本地 html 文档，分析所有 css 语句 记录@font-face语句声明的字体，并且记录使用该字体的 css...选择器 通过 css 选择器的规则查找当前 html 文档的节点，记录节点上的文本 找到字体文件并删除没被使用的字符 编码成跨平台使用的字体格式 ==font-spider 仅适用于固定文本，如果文字内容为动态可变的...，新增的文字将无法显示为特殊字体。...--发现字体文件的根目录多了一个font文件夹，文件夹里存放的是原来字 体文件的备份，而网页引用的是使用字蛛后压缩保存的字体--> 二、在线提取字体 字体生成器 字体文件生效了，但是同样，也不支持动态的添加的文字

1.9K50

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

一直以来，本站使用的是 HarmonyOS Sans 字体，但由于中文字体文件过大（约 4.3 MB），导致网页加载速度缓慢，不利于弱网环境下的访问。...因此，本文将介绍如何使用 fontTools 中的 pyftsubset 对网页字体进行切片，以优化网页字体文件大小。...安装 woff2 在对字体文件进行切片后，需要将字体文件转换为 woff2 格式，因此需要安装 woff2 工具： # 安装依赖 ## Debian 11或12 apt update apt install...新建一个文件夹，将需要切片的字体文件放入其中： mkdir fonts cd fonts 切片并转换为 woff2 格式 本文使用的是 HarmonyOS Sans 字体，字体文件名为 HarmonyOS_Sans_SC_Regular.ttf...，使用以下命令进行切片： 注意： 1.如您使用的是其他字体，请将命令复制到编辑器，并将命令中的 HarmonyOS_Sans_SC_Regular 替换为您的字体名称。

2.1K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    【Flutter】Flutter 自定义字体 ( 下载 TTF 字体 | pubspec.yaml 配置字体资源 | 同步资源 | 全局应用字体 | 局部应用字体 )

    一、Flutter 自定义字体 1、ttf 字体文件 字体资源文件 : ttf 格式的字体资源 ; Flutter 应用字体资源文件 : 在 Flutter 应用根目录下创建 fonts 目录 , 将下载的...ttf 字体放资源文件在该 fonts 目录下 ; 2、ttf 字体资源配置 配置字体资源 : 自定义字体资源需要在 pubspec.yaml 配置文件中配置 , 字体资源配置格式如下 : fonts..., 配置如下 : flutter: # 配置图片资源 assets: - images/hunter.png # 配置字体资源 fonts: - family: RubikMonoOne...官网 : https://flutter.dev/ Flutter 插件下载地址 : https://pub.dev/packages Flutter 开发文档 : https://flutter.cn.../ , http://flutter.axuer.com/docs/ Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 ) 博客源码下载

    4.4K00

    在网站或桌面应用使用Font Awesome图标库

    可适配于屏幕阅读器 与其它字体不同，Font Awesome不会影响屏幕阅读器正常工作。 背景 网页小图标到处可见，如果一个网页都是干巴巴的文字和图片，而没有小图标，会显得非常简陋。...打开FontLab，随便打开一款字体文件，比如tahoma.ttf： 然后双击某个字符，将原有图形删除，粘贴刚才复制的icon对象： 调整图形大小，一个icon就完成还原了。 就是这么简单。...网页中应用font-awesome： 去官网下载，解压之后，应该能看到“css”和“font”两个文件夹。css文件夹中存放着css文档，font文件夹中存放在着适用于不同浏览器的字体文件。...（注意，在“fa-link”前面还要加入一个“fa”类，例如 ） 2.3 设置大小和颜色 学会了以上的简单使用，设置颜色和大小非常简单，只要你会用css设置文字的颜色和大小就行...在WPF中使用FontAwesome之类的字体图标 在WPF程序中，一般接触到的矢量图标资源有XAML、SVG、字体这三种格式。

    3.1K20

    前端工程师如何干掉设计

    1.调整图片大小 　　如果你在网络上找到了一张图片或者从设计师那里拿到一张图片用于网页中呈现，但是对图片的大小不满意的话，你只需要利用Photoshop进行调整即可，步骤很简单，如下： 　　（1）利用Photoshop...当我们选择需要的图标时，会出现详细的下载页，我们可以选择我们需要的图标格式比如PNG、ICO或者ICONS，同时我们还可以选择需要的图标大小进行下载，如下： ? 　　...3.字体下载 　　这里的字体主要指纯色的字体图标，现在很多网站的icon图标都是以字体的形式嵌入，这样我们可以一定程度的减少网页中图片的请求数量，同时也便于维护。...（2）icomoon图标库：https://icomoon.io/ 　　这是一个国外的网站，也提供了一系列的字体图标资源，同样具备了图标下载收藏等功能，不过有些字体图标需要收费。 　　...（3）fontawesome图标库：http://fontawesome.io/ 　　fontawesome是一个以导入CSS文件的形式加载的图标库，适合中后台项目的开发使用。

    2.8K40

    【Flutter】Icons 组件 ( FlutterIcon 下载图标 | 自定义 svg 图标生成 ttf 字体文件 | 使用下载的 ttf 图标文件 )

    文章目录 一、FlutterIcon 下载图标 二、自定义 svg 图标生成 ttf 字体文件 三、使用下载的 ttf 图标文件 四、完整代码示例 五、相关资源 一、FlutterIcon 下载图标 -..., 后面一串是随机生成的数字 ; 该压缩包中主要有三个文件 , ① ttf 字体文件 : MyFlutterApp.ttf , svg 格式的图标就封装在该文件中 ; ② dart 文件 : Flutter...ttf 格式的文件 ; 三、使用下载的 ttf 图标文件 ---- 将 MyFlutterApp.ttf 字体文件拷贝到 Flutter 源码根目录下的 fonts 目录下 , 在 pubspec.yaml...配置文件中配置字体文件 , name: flutter_image_widget description: A new Flutter application....官网 : https://flutter.dev/ Flutter 插件下载地址 : https://pub.dev/packages Flutter 开发文档 : https://flutter.cn

    3.9K20

    FontAwesome基础知识

    2019年实习时的 FontAwesome基础知识 备份 基本介绍及用法 基本介绍 FontAwesome是一套绝佳的图标字体库 提供可缩放的矢量图标 可以使用CSS提供的所有特性进行更改，包括：大小、...下载 官网地址：https://fontawesome.com Pro破解版下载：https://prowebber.ru/internet/i-scripts/21650-font-awesome-pro.html.../fontawesome/js/fontawesome.js"> 图标备忘录 可在官方网址上搜索自己想要的图标 也可直接下载为离线PDF文档搜索自己想要的图标。...本站友情下载：solid-pdfbrands-pdfregular-pdflight-pdfduotone-pdf 基本使用 Style Class Prefix Example 实心 fas fa-camera...(Sizing Icons) 图标继承其父容器的字体大小，通过以下类，可增大或减小图标大小。

    1.4K10

    三个Bootstrap免费字体和图标库

    Bootstrap 简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、简单 ，深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好、更快， 组件无数可复用的组件,包括字体图标...，在网页制作中我们经常用到小图标(icon),在Bootstrap中提供了很多这种小图标,在这篇内容中,我们把这套框架上的免费字体图标做了个小整合(当然,以后还会不断的更新) Font Awesome...官方网址 ：http://fontawesome.io/ http://fontawesome.dashgame.com/ 描述：Font Awesome为您提供可缩放的矢量图标，您可以使用CSS...所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。...www.elegantthemes.com/ https://www.elegantthemes.com/blog/resources/elegant-icon-font 由360款优雅的矢量图标字体组成

    1.8K40

    学习WPF——使用Font-Awesome图标字体

    图标字体介绍 在介绍图标字体之前，不得不介绍图标格式ICON ICON是一种图标格式，我们操作系统中各种应用程序都包含一个图标 比如QQ程序的图标是一个可爱的企鹅，我的电脑是一个显示器图标 --...，但我认为Font-Awesome是迄今为止最出色的图标字体（没有之一） 图标多、图标美观、兼容各种应用场景是其最主要的有点 WPF中使用Font-Awesome图标字体 我曾经在Qt应用程序中使用过...Font-Awesome图标字体，用起来非常方便，展现效果也一如预期 但在WPF应用程序中使用图标字体就会显示成一个方框，如下图 ?...后来，才找到解决办法： 首先到Font-Awesome官方网站下载字体程序 ? 下载到的压缩包，解压后获得图标字体文件 ?..." Style="{DynamicResource FontAwesome}" /> FontAwesome

    3.2K50

    :before 和 :after的多用途实践 — 提升篇

    简单说就是，这个字长的像图标，你可以把他当字来对待，可以改颜色（color），改大小（font-size），加阴影（text-shadow） 代码 <!...@font-face { font-family: 'icon'; /*定义字体名称*/ src:url('fonts/fontawesome-webfont.woff...字体文件我用的是Font Awesome的，到下面这个网址，可以下载，也可以找找你喜欢的图标来用。...http://fontawesome.dashgame.com/ woff文件解释一下 Web开放字体格式（Web Open Font Format，简称WOFF）是一种网页所采用的字体格式标准。...此字体格式发展于2009年，现在正由万维网联盟的Web字体工作小组标准化，以求成为推荐标准。此字体格式不但能够有效利用压缩来减少档案大小，并且不包含加密也不受DRM（数位著作权管理）限制。

    88730

    在微信小程序中使用fontawesome6

    在微信小程序中使用fontawesome6 一、下载fontawesome6 https://fontawesome.com/download 我这边选择的是Free for web 版本 二、使用transfonter...编码成Base64 (1)首先先把刚刚下载的fontawesome6解压，得到如下文件目录。...[fontawesome6目录结构] 打开webfonts文件夹 [fontawesome6/webfonts] 把需要的字体上传（点击“Add fonts”按钮）到transfonter，打开Base64...encode [transfonter] 点击Convert，等待一会儿，再点击download即可 [convert] 将刚刚下载的文件解压，得到如下文件目录 [文件解压] 三、在微信小程序中设置...[需要删除的部分] 然后再打开fontawesome6/css文件夹，找到你编码对应字体的css文件，将其中内容复制到font-awesome.wxss中去，我用了far和fas，如果你用的也是这俩，可以直接复制下面的进去

    4.9K11

    Vue项目中优雅使用icon

    再到后来就出现了font库，也就是字体图标库，它出现给了我们开发很大便利，使用起来也非常方便，字体图标为什么方便，因为我们可以直接从市面上的font字体图标库里找图标，直接使用，还可以很好的控制一些基础样式...当然，没有使用过的小伙伴直接百度搜索关键词iconfont使用，相信看一看就会了 接下来我们来看下这三种方式的优缺点(官方的)： font使用方式对比 unicode引用 ---- unicode是字体在网页端最原始的应用方式...支持按字体的方式去动态调整图标大小，颜色等等。 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。...Vue-Awesome 从掘友那了解到了vue-awesome，体验了一番，很nice，内置了fontawesome字体图标库 好像也没啥可对比的，svg图标引入原理差不多，vue-awesome除了内置了...fontawesome图标库之外也可以自己引入图标使用，做了很全面的封装，针对图标由很多功能，所以使用的话会体积会稍大 不过个人觉得，有了iconfont图标库，好像没有太大必要去再用fontawesome

    2.8K20

    WordPress导航菜单图标字体插件font awesome 4 menus纯代码版

    换成 Begin 主题之后，大伙都不约而同的给菜单用上了图标字体，确实给博客带来了一定的美化效果。 与之配套的是 font awesome 4 menus 这个图标字体插件，其实还是挺小巧的。...下面说一下集成到主题的方法： 一、下载上传 下载地址 下载并解压后得到 awesome 文件夹，整体上传到 WordPress 主题目录。...先贴一下效果截图，了解一下图标字体是个什么东东： ? 其实，就是在需要的位置显示一个图标而已。而这一切由 CSS+fonts 来实现，即图标字体。...不过 CSS 前面引入字体和公用样式代码记得要保留，如下所示 @font-face { font-family: 'FontAwesome'; src: url('...../fonts/fontawesome-webfont.eot?v=4.3.0'); src: url('../fonts/fontawesome-webfont.eot?

    3.5K50

    74.8K star！这个开源图标库让界面设计效率提升10倍！

    嗨，大家好，我是小华同学，关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法 Font Awesome 是全球最受欢迎的图标库和工具包，提供超过2000个免费图标和7000+专业图标，支持网页...开发者只需几行代码就能为项目添加精美矢量图标，设计师可直接下载SVG进行二次创作。... )矢量可调智能配色通过CSS直接控制图标颜色和大小...Shaking技术，打包体积减少80%：# 安装指定图标集npm install @fortawesome/free-solid-svg-iconsnpm install @fortawesome/react-fontawesome...企业级安全防护提供内容安全策略（CSP）兼容方案，内置XSS防护机制，满足金融/医疗等敏感行业需求技术架构解析技术维度实现方案优势说明矢量渲染SVG + Web字体双模式高清显示/兼容性好样式控制CSS

    72410

    Flutter for OpenHarmony 简单的应用开发详解：从代码到页面的完整构建流程

    assets/：存放图片、字体等资源（未展开）。 ✅ 说明：这是典型的 Flutter 项目结构，遵循官方推荐规范。...TextStyle 设置字体大小为 24px，颜色为白色（Colors.white）。 ✅ 注意：使用 const 创建不可变对象，提高性能并支持热重载。...正在从 CDN 下载 Flutter 资源文件（如图标、字体） Launching lib/main.dart on Edge......主体内容区（Body） 背景色：青绿色（#3ECCCA） 居中大字：“在这里我们将一起提升自我” 字体大小：24px，白色，清晰易读 3....运行层面：通过 flutter run 启动调试服务，连接浏览器。 展示层面：在本地服务器上呈现美观、响应式的网页界面。 交互层面：支持热重载、调试、语音输入等现代开发特性。

    9810

    gitbook 入门教程之使用 gitbook-cli 开发电子书

    $ gitbook serve 构建 gitbook 静态网页 构建静态网页而不启动本地服务器,默认生成文件存放在 _book/ 目录,当然输出目录是可配置的,暂不涉及,见高级部分....输出静态网页后可打包上传到服务器,也可以上传到 github 等网站进行托管,因而主要用于发布准备阶段...._book 输出目录[可选] 执行 gitbook build 或 gitbook serve 命令后会自动生成静态网页....输出格式,可能需要安装 ebook-convert 等相关插件 |配置项|描述| |-|-| |pdf.pageNumbers|添加页码(默认值是 true )| |pdf.fontSize|字体大小...(默认值是 12 )| |pdf.fontFamily|字体集(默认值是 Arial )| |pdf.paperSize|页面尺寸(默认值是 a4 ),支持a0,a1,a2,a3,a4,a5,a6,b0

    3K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券