AI 摘要：作者通过实验发现，虽然 CSS 无法直接为特定字母（如 "E"）单独设置样式，但可以借助 @font-face 的 unicode-range 特性，为某些 Unicode 字符指定不同的字体，实现“伪定向”样式。这种方法能让部分字符使用不同字体或通过字体文件的多彩功能（如 OpenType 的 COLR 表）来实现颜色变化，从而在不添加额外标记的情况下，产生有趣的视觉效果。尽管样式控制有限，但仍展现了 CSS 与字体技术结合的创造潜力。

1. CSS 与字符定向样式的限制与突破
• 通常看来，CSS 无法直接选择文字中的某个具体字符进行样式修改。
• 作者提出一种“秘密方法”，利用字体层面实现针对字符的视觉差异。

2. @font-face 与 unicode-range 的创新用法
• 定义自定义字体 "Different"，并指定某些 Unicode 码位（如 a, e, i, o, u）。
• 使用 font-family 优先级让目标字符采用不同字体，其他字符保留默认样式。
• 在视觉上形成“部分字符变异”效果，而无需额外 HTML 标记或包裹元素。

3. 可扩展技巧与字体特性应用
• 利用 size-adjust 属性可微调字体尺度，使字符外观稍有变化。
• 利用 WOFF2 格式中的 COLR 表（彩色字体表），可为字体字符添加颜色图层。
• 举例引用多彩像素字体 Street Fighter II Large 1，实现大写字符的彩色展示。

4. 结论：CSS 与字体结合的创造空间
• 尽管 CSS 本身不支持字符级定向样式，但字体技术为前端视觉设计提供了可能。
• 此实验启发开发者通过字体文件与 CSS 结合，实现独特、微妙的文本艺术效果。

AI 摘要：本文深入介绍了高质量字体 (high-quality fonts) 所附带的各种隐藏功能，尤其是 OpenType 及 Variable Fonts 的特性，如 axes 变化、替代字形 (alternates)、swashes、数字样式 (numerals)、小型大写 (small caps)、上下文替换 (contextual alternates) 等，并结合 CSS 的相关属性给出实践方式。文章核心思想是：字体远不止「粗体/斜体」，合理启用这些特性能够提升应用设计的可读性与美感。

1. Variable Axes（可变字体轴线）
• OpenType 字体支持多个轴 (axes)，如 wght(weight)、wdth(width)、slnt(slant)、ital(italic)、opsz(optical size)。
• CSS 提供对应属性 (如 font-weight)，但对于自定义轴需用 font-variation-settings。
• font-variation-settings 存在级联冲突问题，可通过 CSS variables 解决。

2. Alternates（替代字形）
• Stylistic alternates：用 salt、ss01、cv01 等替换字符形态（如 “a”、“g”）。
• CSS 可通过 font-feature-settings 或 font-variant-alternates 控制，后者更可读，但同样有继承覆盖问题。

3. Swashes（装饰性字形）
• 一些字体附带装饰性笔画 (swashes)，可增强标题表现力。
• 使用 font-feature-settings 或 font-variant-alternates 启用。

4. Numerals（数字字形样式）
• 字体可包含 lining numerals（对齐大写字母高度）、old-style numerals（小写高度）、tabular（等宽）、proportional（按比例）。
• 使用 font-variant-numeric 控制，如 tabular-nums、oldstyle-nums。
• 场景：表格更适合 tabular，正文常用 proportional 或 old-style。

5. Small Caps（小型大写）
• 小型大写可减少正文中大写字母突兀的问题。
• 使用 font-variant-caps（small-caps 或 all-small-caps）。
• 避免浏览器自动合成（非真正小型大写），可通过 font-synthesis 禁用。

6. Contextual Alternates（上下文替换）
• 自动替换特定上下文中的字符形态，如 → 符号、@ 符号的排版优化。
• 多数字体默认启用，可通过 font-variant-ligatures: no-contextual 禁用。

7. Further Reading（扩展资料）
• 提及更多 OpenType 特性（连字、分数、历史字形、花饰等）。
• 推荐网站、演讲与「Variable Fonts Primer」。

AI 摘要：本文探讨了字体预加载 (font preload) 对网站性能的利弊。虽然预加载可以减少字体切换导致的双重渲染和版式抖动，但在 Chrome 等浏览器的机制下，可能会推迟 First Contentful Paint (FCP) 和 Largest Contentful Paint (LCP)。文章重点分析了预加载在不同场景下的风险与收益，并提出了实践建议：仅预加载关键字体、自托管字体、谨慎区分文本字体与图标字体。结论是：预加载并非万能方案，而应基于实际数据与场景做针对性优化。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]
1. 不预加载字体的情况
• 默认情况下，浏览器会先渲染系统字体，再替换为下载完成的 Web 字体，造成二次渲染与视觉抖动。
• 开发者常用预加载来避免多次绘制。

2. 预加载字体的权衡 (Trade-offs)
• 预加载强制浏览器提前下载字体，但可能延迟首屏渲染。
• 大多数现代浏览器支持 link rel="preload"，但行为存在差异。

3. 浏览器行为与渲染延迟
• Chrome 从 2023 年起更改机制：延迟首屏渲染 (first paint)，等待字体加载完成，从而减少布局错位。
• 这种优化虽然稳定首屏效果，却可能推迟 FCP 与 LCP。

4. Chrome 的预加载超时 (Preloading timeout)
• Chromium 设计了两个超时机制：
• 1500ms 自导航开始计算，避免过长等待。
• 100ms 自最后一个阻塞性资源加载完成开始计算，保证不会显著拖慢首屏渲染。

5. 预加载最佳实践
• 仅预加载首屏必需字体，避免过度使用。
• 始终加上 crossorigin 属性，即使同域下载。
• 尽量自托管字体，避免额外 DNS/TLS 开销。
• 优先预加载文本字体，不建议预加载图标字体（初期核心是可读内容，而非交互按钮）。

6. 结论 (Bottom line)
• 字体预加载可以优化体验，也可能破坏性能。
• 建议从小规模测试入手，基于真实用户数据决策，不盲目“一刀切”。

AI 摘要：作者指出大多数站点把字体当装饰而非基础设施，导致体积臃肿、加载策略失当、CLS 爆炸与隐私合规风险；文章从历史与神话、浏览器渲染管线、现代 CSS 描述符、子集化与可变字体、系统栈与自托管、预加载与 Early Hints、文件格式与图标字体替代、非拉丁脚本与 Emoji、到工具审计与行动清单，给出“系统优先、仅用 WOFF2、内联 + 预加载、智能子集、设计回退、变量字体有的放矢、尊重全球脚本、持续测试”的全套可落地策略。

Jono Alderson

You’re loading fonts wrong (and it’s crippling your performance)

Fonts are one of the most visible, most powerful parts of the web. And yet: almost everyone gets them wrong.

AI 摘要： 本期 React Status 通讯（#434，2025年7月2日）聚焦于 React 生态系统的最新动态与讨论热点，涵盖了 React 开发中的复杂性问题、工具库更新、技术文章、会议回顾以及社区活动等内容。特别值得关注的是 Mario Brizic 的一篇挑衅性文章，讨论了 React 在构建现代 SPA 应用时可能带来的复杂性与混乱，引发了 Reddit 和 Hacker News 上的广泛讨论。此外，还包括 Vercel Ship 2025 会议的亮点回顾、新工具和框架的介绍，以及多篇关于 React 开发技巧的文章。

1. 主文章：React Still Feels.. Foolish, and No One is Talking About It?
• 作者 Mario Brizic 探讨了 React 在构建复杂 SPA 应用时的痛点，指出其灵活性可能导致代码混乱，强调这并非 React 独有问题。
• 该文在 React 社区内引发了激烈讨论，尤其是在 Reddit 和 Hacker News 上。
2. 简讯 (IN BRIEF)
• Reactylon：基于 Babylon.js 的 React 3D/扩展现实框架，新增展示页面。
• React Advanced London：11 月在伦敦举办的线上线下 React 活动。
• Anthropic 新功能：通过 Claude 构建和分享带有 React UI 的 AI 应用。
3. 会议回顾：Vercel Ship 2025 Recap
• 总结 Vercel 年度会议的最新公告，包括 AI SDK 更新、Fluid 计算选项、Vercel Sandbox、滚动发布功能和机器人检测等。
4. 技术文章
• 《Using useOptimistic to Make Your App Feel Instant》by Kent C. Dodds：介绍如何使用 useOptimistic 提升应用响应速度。
• 《A Study Guide to Data Fetching in React》by React Practice：React 数据获取的学习指南。
• 《Automating Frontend Accessibility with Storybook 9》by Dominic Nguyen：探讨如何利用 Storybook 9 自动化前端无障碍性测试。
5. 代码、工具与库
• Time Picker：基于 shadcn/ui 的日期/时间选择组件，简洁优雅。
• Tuono：React/Rust 全栈框架，结合 Next.js 风格与 Rust 后端开发。 #rust 【啊？6】
• react-xtermjs：为 React 应用添加 Xterm.js 终端体验。
• UI Builder 2.0：Figma 风格的可视化组件构建工具。
• AG Charts v12.0、Yet Another React Lightbox 3.24、Schedule-X 2.35、Ink 6.0.1 等工具和库的更新与介绍。
6. 深度内容
• 介绍了 Vercel 开发的开源字体 Geist，支持多语言和多种字重。 #font
• Josh Justice 关于在 React 中使用 MUI X Charts 创建高级折线图的教程。
• Neobrutalism：基于 shadcn/ui 的视觉组件库。
• 关于 React 应用样式设计的思考，作者支持 Tailwind 方案。
• 使用 Kamal 2 部署 Next.js 应用
• 使用 Framer Motion 创建 “Sticky” 搜索交互的教程
• 在最后介绍了编辑团队的其他技术通讯，如 Ruby Weekly、JavaScript Weekly、Node Weekly 等，覆盖多个技术领域。

Reddit

From the programming community on Reddit: React Still Feels Insane And No One Is Talking About It

Posted by mbrizic - 411 votes and 320 comments

AI 摘要：本文介绍了在 Tailwind CSS 中使用自定义字体的方法，重点讨论了通过本地安装字体和 Web 字体两种方式，并提供了具体的实现步骤和代码示例。

1. 引言
• 作者提到自己搜索“如何在 Tailwind CSS 中使用自定义字体”的需求，并找到了解决方案。
• 问题背景：在 React 项目中，没有全局 CSS 文件的情况下如何添加本地安装的字体。

2. 解决方案
• 方法 1：通过 index.html 文件添加本地字体
• 在 index.html 中插入 <link> 标签引用本地字体文件。
• 适用于 React 项目，且作者认为这种方式更符合标准，尤其是已通过类似方式导入 Web 字体的情况。
• 方法 2：使用 Web 字体
• 通过 CDN 或在线链接导入字体（如 Google Fonts）。
• 需要在 Tailwind 配置文件中扩展字体配置。

3. 潜在问题与建议
• 作者不确定从其他角度看这种方法是否存在问题，但认为在当前项目中是可行的。
• 提示读者根据项目需求选择最合适的字体导入方式。

LogRocket Blog

How to use custom fonts in Tailwind CSS - LogRocket Blog

Learn how to use Google Fonts and locally installed fonts in a Tailwind project to help you improve your typography and design consistency.