首页
学习
活动
专区
圈层
工具
发布
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    网页特殊字体过大的优化

    html网页引用中文字体,文件过大,加载缓慢的解决办法 解决办法: 一、字蛛 原理 爬行本地 html 文档,分析所有 css 语句 记录@font-face语句声明的字体,并且记录使用该字体的 css...选择器 通过 css 选择器的规则查找当前 html 文档的节点,记录节点上的文本 找到字体文件并删除没被使用的字符 编码成跨平台使用的字体格式 ==font-spider 仅适用于固定文本,如果文字内容为动态可变的...--也就是你的html完整路径 【*】 是通配符,表示会扫描所有的html文件 --> html中使用的特殊字体文字,将文件名改成对应的文件名--> 4.运行完后 字体文件的根目录多了一个font文件夹,文件夹里存放的是原来字 体文件的备份,而网页引用的是使用字蛛后压缩保存的字体--> 二、在线提取字体 字体生成器 html--> 京德匠心铸器 ? 也可以看出来字体文件生效了,但是同样,也不支持动态的添加的文字

    1.8K50

    css字体渐变色_html美化代码

    之前写了个稿子http://club.chinaren.com/163042278.html自己配了不少的颜色可是U盘不小心中毒格式化。 没办法只好继续重来。。。。...1 #eff99cc#K 自创黑色字体裹着一层粉色粉红蕾丝 2 #ecc33cc#cff9966 外红内浅粉色 3 #e330066#cff99ff 外紫内浅红 4 #u#b#eff99cc...最简单的加闪加下横线的纯粉白字体我自己用的就是去掉#b而已 5 #effffff#cff99ff 还是粉色粉色打亮白色的那种。。。...喜欢的抱走嘻嘻 4 #e9966ff 很明媚的紫色 5 #gf88fcc#u#gf47fcc#u 感觉是石榴籽的颜色打起来有点麻烦因为这个字体只能用一次 下次用的时候它的后半截会掉额。。。...发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/180870.html原文链接:https://javaforall.cn

    4.4K20

    html中中文字体的代码

    标楷体 DFKai-SB 仿宋 FangSong 楷体 KaiTi 仿宋_GB2312 FangSong_GB2312 楷体_GB2312 KaiTi_GB2312 宋体:SimSuncss中中文字体...FZShuTi 方正姚体:FZYaoti 华文彩云:STCaiyun 华文琥珀:STHupo 华文隶书:STLiti 华文行楷:STXingkai 华文新魏:STXinwei Windows 中的中文字体...在默认情况下,也就是未自行安装新字体或者 Office 等文字处理软件的情况下,Windows 默认提供下列字体: Windows 95/98/98SE 宋体、黑体、楷体_GB2312、仿宋_GB2312...2312 简体中文(HZ) 54936 GB18030 简体中文(GB18030) 补充: 使用楷体_GB2312、仿宋_GB2312后,在 Windows 7/Vista/2008 中可能不再显示为对应的字体...这是因为 Windows 7/Vista/2008 中有楷体、仿宋,默认情况下没有楷体_GB2312、仿宋_GB2312,字体名称相差“_GB2312”。

    8K20

    将字体进行缓存,优化网站速度

    看着现在动辄几兆的字体,在网页上使用会严重拖慢加载速度,有没有什么方法能够改善这种情况?...这时候我们就需要对字体进行优化了 对字体进行优化的方式有很多,比如: 分组加载字体 限制字体加载时间 队列加载 自定义字体显示 本文主要介绍如何通过缓存的方式优化字体加载 注:本文字体应用针对全站生效...font-display: optional; /* 此处将文件路径修改为实际路径 */ src: url("/path/to/font.ttf"); } 注:使用 localStorage 进行字体缓存仅适用于较小的字体文件...两种方法的不同 # Service Worker 缓存字体 IndexedDB/LocalStorage 缓存字体 功能和用途 提供高级缓存控制和离线支持 简单的数据存储和访问 存储位置 浏览器的缓存存储...浏览器的客户端存储 控制灵活性 高 低 离线支持 是 否 数据类型 二进制数据 字符串数据 功能复杂性 高 低 适用场景 高级缓存需求、离线访问 简单的数据缓存需求 字体大小 可缓存较大字体 仅缓存较小字体

    80710

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

    一直以来,本站使用的是 HarmonyOS Sans 字体,但由于中文字体文件过大(约 4.3 MB),导致网页加载速度缓慢,不利于弱网环境下的访问。...因此,本文将介绍如何使用 fontTools 中的 pyftsubset 对网页字体进行切片,以优化网页字体文件大小。...新建一个文件夹,将需要切片的字体文件放入其中: mkdir fonts cd fonts 切片并转换为 woff2 格式 本文使用的是 HarmonyOS Sans 字体,字体文件名为 HarmonyOS_Sans_SC_Regular.ttf...,使用以下命令进行切片: 注意: 1.如您使用的是其他字体,请将命令复制到编辑器,并将命令中的 HarmonyOS_Sans_SC_Regular 替换为您的字体名称。...3.更多使用方法请参考https://fonttools.readthedocs.io/en/latest/subset/index.html。 4.以下命令仅适用于中文简体。

    1.9K10

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

    ,甚至有时候一个字体比其他所有的资源(js、css、图片)加起来还要大,对网页的加载性能起到非常关键的影响,因此有必要对字体进行一些优化。...本文主要从字体格式、按需提取、统一渲染三个方面来谈谈优化字体的常用技巧。...首先,全局安装 font-spider: npm install font-spider -g 然后,新建一个 html 文件,比如文件名为 index.html ,里面用一个元素包含所有的你想要提取的文字...文件所在的目录执行以下命令: font-spider index.html 这时候,原来的 SourceHanSansCN-Regular.ttf 就会被移动到 .font-spider/ 目录下,...小结 关于字体优化技巧就先写到这里啦,有问题的欢迎留言交流哈。

    1.6K00

    Web 中文字体性能优化实践

    背景介绍— Web 项目中,使用一个适合的字体能给用户带来良好的体验。但是字体文件这么多,如果设计师或者开发人员想要查询字体,只能一个个打开,非常影响工作效率。...使用 web 自定义字体— 在聊这两个问题之前,我们先简述怎样使用一个 Web 自定义字体。...中文字体体积太大导致加载时间过长— 分析原因 那么中文字体相较于英文字体体积为什么这么大,这主要是两个方面的原因: 中文字体包含的字形数量很多,而英文字体仅包含26个字母以及一些其他符号。...但无论哪种预览方式,也仅仅会使用到该字体的少量字符,因此全量加载字体是没有必要的,所以我们需要对字体文件做精简。...如果字体文件包含多个字体,则每种字体的偏移表会在 TTCHeader 中指定,这种文件不在文章的讨论范围内。

    2.8K10

    网站优化系列篇之01 — 网页字体可见性

    那我们要怎么优化处理这个问题呢? 原因: 字体通常是需要一段时间才能加载的大文件。为了解决这个问题,一些浏览器会在字体加载之前隐藏文本。...swap告诉浏览器使用该字体的文本应立即使用系统字体显示。自定义字体准备就绪后,系统字体将被换出。 如果浏览器不支持font-display,浏览器将继续遵循其加载字体的默认行为。...这些是常见浏览器的默认字体加载行为: 浏览器 如果字体未准备好,则默认行为… Edge 使用系统字体直到字体准备好。换出字体。 Chrome 将隐藏文本长达 3 秒。...如果文本还没有准备好,使用系统字体直到字体准备好。换出字体。 Firefox 将隐藏文本长达 3 秒。如果文本还没有准备好,使用系统字体直到字体准备好。换出字体。...这种方法分为三个部分: 不要在初始页面加载时使用自定义字体。这可确保浏览器立即使用系统字体显示文本。 检测自定义字体何时加载。

    70720
    领券