- 01 浏览器怎么加载网页字体 适合谁看：想搞清楚网页字体从请求到显示经历了什么、为什么会「白屏」或「跳一下」的前端开发者。 @font-face 的基本写法见《在网页里使用字体：@font-face 的现代写法》。本页讲背后的过程，后面几页的优... 1 小时前
- 02 动手拆子集：pyftsubset 适合谁看：想把一款字体裁成只含页面用到的字、转成 WOFF2 自己部署的开发者。 先确认许可允许修改和网页使用，见《自托管网页字体的许可要点》。 准备 pyftsubset 是 fontTools 自带的子集工具。... 1 小时前
- 03 按字分片：cn-font-split 适合谁看：内容不固定（博客、社区、电商），想把整款中文字体拆成很多小片、按需加载的开发者。 分片和子集的区别 子集：只留下一部分字，其他字不要了。 分片：一个字也不丢，把整款字体切成很多片，每片几十 KB，用 u... 1 小时前
- 04 写对 @font-face：字体名、字重和 local() 适合谁看：自己写 @font-face、或自己部署多字重字体的开发者。 @font-face 写错了，浏览器多半不会报错，只会悄悄用错字体、自己加粗，或者多下载文件。下面是几条容易忽略的正确写法。 一个家族，一个... 1 小时前
- 05 加载策略：font-display、预连接和预加载 适合谁看：已经能用上网页字体，想让首屏更快、闪动更少的前端开发者。 font-display 怎么选 取值 等待字体（期间不显示文字） 换成新字体的时机 适合 auto 由浏览器决定，常见是 block — 不建... 1 小时前
- 06 减少跳动：后备字体和尺寸调整 适合谁看：用了 font-display: swap，但字体换上来时页面「跳一下」，想减少布局偏移（CLS）的开发者。 为什么会跳 备用字体和网页字体的字宽、上下留白不同。换字体时，一行能放下的字数变了，行高也可... 1 小时前
- 07 中文字体栈怎么写 适合谁看：要给中文网站写 font-family 的前端开发者，不管有没有用网页字体。 字体栈是什么 font-family 可以写一串字体名，浏览器从左到右找，逐个字符判断：第一个字体里没有这个字，就用下一个字... 1 小时前
- 08 用文风网页字体：一页看懂正确接法 适合谁看：准备在网站上用文风网页字体，想一次把关键做法看全的开发者和站长。 本页是要点汇总，细节在《文风开发者文档》各页。 地址 https://cn.windfonts.com/fonts-packages/{目... 1 小时前
- 09 自托管网页字体的许可要点 适合谁看：打算把字体文件放在自己服务器上做网页字体的开发者、站长和企业法务。 网页字体是一种「分发」 网页字体的原理是让访客的浏览器下载字体文件。从许可的角度看，你在把字体文件提供给每一位访客。所以： 商业字体：桌... 1 小时前
- 10 字体没生效？一套排查顺序 适合谁看：网页字体「好像没用上」「只有部分字变了」「变粗了」，想自己查原因的开发者。 文风网页字体的专门问答见《开发常见问题》。本页是通用的排查顺序，自托管、第三方字体也适用。 1. 看渲染字体 Chrome 或 ... 1 小时前
- 11 可变字体和增量字体传输 适合谁看：关注网页字体新技术、想知道哪些现在能用、哪些还要等的开发者。 可变字体：现在就能用 可变字体（Variable Font）把一个家族的多个字重（以及宽度、倾斜等）放进一个文件，用「轴」连续调节。 浏览器支... 1 小时前