不同的字体文件类型（OTF、TTF、WOFF、WOFF2）
因为公司的一些业务，需要对字体的相关概念有一定的了解，这里稍微记录下。 首先，我们先来知道下，常见的几种字体文件类型。 只需要一个文件，包含一个单独的字体样式文件（普通、斜体、粗体等） 。TrueType 文件格式仅用于屏幕，字体文件的扩展名是 兼容性如下： 它基于支持扩展字符集（连字、替代样式、字形等）的 TrueType 格式 字体文件的扩展名： 包含 TrueType 字体的 OpenType 文件后缀名为 。 包含 PostSc...
妙用 background 实现花式文字效果
本文将讲解如何利用 background 系列属性，巧妙的实现一些花式的文字效果。通过本文，你将可以学到： 通过 与 实现酷炫的文字下划线效果 通过 与 以及 实现文字逐个渐现的效果 起因 写本文的动机是在于，某天，被这样一个标题所吸引 \ \ 10 Masterfully Designed Websites，其中列举了 10 个极具创意的 Web 网站。 其中一个 Red Bull Racing 网站，是介绍关于 F1 红牛车队的主页...
字体加载的几种方案
众所周知，中文字体文件都是比较大的，且还有不同的字重，如果需要加载所有字重的字体文件，那体积就更加夸张，本文简述字体加载的几种方案，以及如何选择合适的方案。 正文 我们可以看到，一个包含所有字重的思源黑体文件大小有 30MB，这个体积是非常夸张的。 如果我们需要对所有字体文件做加载，那么加载时间就会过长，很影响首屏时间。所以我们可以根据业务场景来使用不同的字体加载方案。 全量加载字体 虽然全量加载字体的操作对首屏的性能影响比较大，但是部...
网站中文字体包优化指南
原文地址（本人博客）： 在开发中文网站时，我们通常需要下载汉字字体包，但众所周知，汉字字体包的体积通常比较大，以谷歌字体中的 字体为例，直接下载下来的完整字体文件体积为17.7MB。 17.7MB的大小对于一个页面资源来说是巨大的；尽管现代的网络环境中，许多浏览器和服务器已经开始广泛支持 HTTP/2 协议或者更高版本的协议，单个网络资源的请求并不影响其他资源的传输，但其可能会占用大量带宽其他资源的请求可能会因为带宽限制而排队等待传输。...
唠唠 Chrome DevTools 中最新的实用技巧
以下的内容基于 Chrome 浏览器 122.0.6261.112 版本撰写！ 随着 Chrome 浏览器版本的不断迭代，Chrome DevTools 引入了不少实用的功能，其中有些功能对日常工作效率提升是十分明显的，在此，我本来想具体写写自己的使用体验和理解。 不过，我所使用过的功能，结合自己看过的文章资讯，基本上能找到更详实、更完善的内容介绍，因此，这篇文章，我更多是基于使用到的技巧，然后罗列出对应功能的文章链接出处，帮助大家有更...
如何减少网页卡顿
关于如何提高 JavaScript 应用速度的常见建议通常包括“不要阻塞主线程”和“拆分长任务”。 本页详细介绍了这些建议的含义，以及使用 JavaScript 优化任务的重要性。 什么是任务？ 任务是指浏览器执行的任何独立工作。这包括呈现、解析 HTML 和 CSS、运行您编写的 JavaScript 代码，以及您无法直接控制的其他事项。网页的 JavaScript 是浏览器任务的主要来源。 由 click 事件处理脚本启动的任务，显...
破案了，为啥TypeScript5.3编译let、const一直是var
啊！2024才学TypeScript还有价值吗？!学的话，就用最新的上。 1.环境 8.15.4 Version 5.3.3 v20.10.0 2.背景&测试 使用pnpm安装了最新的TypeScript5.3.3，开始学习ts类型。 发现不论是let、const使用tsc编译完都是var。强迫症表示ES2016起不能接受var,尝试各种配置tsconfig.json后无效。 为什么let 经过tsc编译后 let= var 简化此图投...
pnpm v9 正式发布，已停止 Node.js v16 支持
近日，pnpm v9.0.0 正式发布！带来了一系列重大更新和改进，让你的开发体验更加顺畅。现在可以通过 来升级 pnpm 到最新版本，接下来让我们一起看一下 pnpm v9 有哪些亮眼的新功能吧。 🔥 Node.js 支持 pnpm v9.0.0 现已停止对 Node.js v16 提供支持，但不用担心，现在将 pnpm 与 Node.js 一起捆绑发布。 这意味着，无论你安装了哪个版本的 Node.js，pnpm 都会使用必要的...
Go Tag 标签 详解
Go 语言 tag 标签的基础介绍是什么？ 在 Go 语言中，标签（Tag）是附加到结构体字段的元信息，它是以字符串的形式存储的。这些标签可以通过反射（reflection）机制来获取，并可以被用于各种目的。例如，一些库会使用标签来控制序列化和反序列化，如 JSON 或 XML 库；还有一些库可能会使用标签来进行数据验证或进行数据库到结构体的映射。 以下是在 Go 中定义结构体并添加标签的示例： 在这个例子中， 、 和 这三个字段都有一...