你的设计系统也应美化文字
内容提要
Web Awesome 为长文本提供排版方案：`wa-prose` 类自动样式化内容块，配合 CSS @scope 防止样式泄漏；手动类型类（如 `wa-heading`、`wa-body`）和文本工具类（对齐、大小写）用于非散文区域。所有类共享设计令牌，确保一致性，需引入 utilities.css 和 native.css 文件。
延伸解读
设计系统为何常忽略长文本
许多设计系统专注于组件样式，却很少覆盖博客、文档等长文本内容。团队往往被迫编写临时的排版样式表，这些代码缺乏维护且容易失控。Web Awesome 通过 wa-prose 等工具填补了这一空白，让长文本也能与组件共享设计令牌，减少重复劳动。
@scope 如何防止样式泄漏
wa-prose 利用 CSS @scope 将排版样式限制在容器内，避免影响嵌入的组件。通过 wa-not-prose 类可显式排除某些区域，无需使用高优先级选择器或 !important。这解决了内容块与组件混排时的样式冲突问题，让样式管理更清晰。
手动类型类与工具类的适用场景
对于非散文区域（如标题、卡片、说明文字），wa-heading、wa-body、wa-caption 等类提供了从 3xs 到 5xl 的完整字号阶梯，与 wa-prose 共享同一套设计令牌。文本工具类（如对齐、大小写）采用逻辑属性，可自动适配 RTL 布局，且可与手动类组合使用。
使用前需注意的依赖与限制
要使用这些排版功能，必须引入 utilities.css 和 native.css（或合并的 webawesome.css）。native.css 提供基础元素样式，对长文本至关重要。此外，语法高亮不在 Web Awesome 范围内，需自行集成 Prism 等工具。
Q&A
Web Awesome 如何为长文本内容提供排版样式？
Web Awesome 通过三种工具为长文本提供排版样式：自动模式（wa-prose 类）自动样式化整个内容块；手动类型类（如 wa-heading、wa-body、wa-caption）用于非散文区域；文本工具类（对齐和大小写）用于调整文本。这些工具共享设计令牌，确保一致性。
wa-prose 类的作用是什么？如何使用？
wa-prose 类用于自动样式化内容块，只需将内容包裹在带有 wa-prose 类的容器中，内部的标题、段落、列表、引用、代码块等元素会自动获得合适的间距、大小和节奏。例如：<div class="wa-prose">...</div>。
wa-prose 如何防止样式泄漏到嵌入的组件中？
wa-prose 使用 CSS @scope 规则，样式从根元素向下流动并在边界处停止。如果需要在散文内部嵌入组件且不希望组件受到散文样式影响，可以在组件外层包裹一个 wa-not-prose 类，这样组件内部的样式就不会被散文样式覆盖。
Web Awesome 提供了哪些手动类型类？它们与 wa-prose 有何不同？
手动类型类包括 wa-heading（标题）、wa-body（正文）和 wa-caption（小号说明文字），每个类都有从 3xs 到 5xl 的尺寸变体。它们用于非散文区域，如英雄标题、卡片标题、图片说明等，而 wa-prose 用于自动样式化整个内容块。两者共享同一套设计令牌，因此视觉上保持一致。
Web Awesome 的文本工具类有哪些？它们有什么特点？
文本工具类包括对齐类（wa-text-start、wa-text-center、wa-text-end、wa-text-justify）和大小写类（wa-text-uppercase、wa-text-lowercase、wa-text-capitalize）。它们使用逻辑属性（start/end），在 RTL 布局中会自动翻转。这些工具类可以与 wa-prose 或手动类型类组合使用。
使用 Web Awesome 的排版功能需要引入哪些 CSS 文件？
需要引入 utilities.css（包含 wa-prose、类型类和文本工具类）和 native.css（为散文内的元素提供基础样式）。此外，还需要引入主题文件和自动加载器。如果希望简化，可以引入 styles/webawesome.css，它包含了所有必需的样式。
Web Awesome 的排版系统如何保证一致性？
所有排版类（wa-prose、手动类型类、文本工具类）都基于相同的设计令牌（如 --wa-space-scale），因此无论使用自动模式还是手动模式，文本的间距、大小和节奏都保持一致。这避免了设计系统在长文本区域失效的问题。
