字体栈构建器

The CSS generic families—serif, sans-serif, monospace, cursive, and fantasy—are keywords, not font names, that instruct the browser to use its built-in default for that category if no earlier entry in the stack is available. They are mandatory as the last value to guarantee that text always renders. Without a generic fallback, if every named font in the stack is unavailable, the browser falls back to its own default (often Times New Roman), which may not match the design intent at all.

system-ui is a CSS generic font family added to the CSS Fonts Level 4 specification that maps to the operating system's default interface font: San Francisco on macOS/iOS, Segoe UI on Windows 10/11, Roboto on Android and ChromeOS, and Ubuntu on Ubuntu Linux. Using system-ui (or its platform-specific aliases like -apple-system and BlinkMacSystemFont) produces native-looking interfaces with zero additional HTTP requests and excellent hinting at all sizes. It is the recommended starting point for UI components where brand personality is less important than integration.

font-display: swap tells the browser to immediately render text in the first available fallback font and swap to the web font once it has downloaded. This prevents the 'flash of invisible text' (FOIT)—where text is hidden during font loading—at the cost of a brief visual shift when the swap occurs. Chrome's Lighthouse audit recommends swap for fonts on the critical rendering path. For fonts loaded after initial paint (e.g. icon fonts or decorative display fonts), font-display: optional is preferable as it cancels the font if it has not loaded within a short timeout.

Very few fonts are universally available across macOS, Windows, Android, iOS, and Linux. The safest cross-platform fonts are Arial, Times New Roman, Courier New, Georgia, Verdana, and Trebuchet MS—part of Microsoft's Core Fonts for the Web initiative from the late 1990s. More modern safe choices include Impact (Windows/macOS only) and Tahoma. For reliable cross-platform rendering without web font loading, the system-ui stack or a native stack like -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif covers the vast majority of users.

Monospace fonts—where every character occupies an identical horizontal width—are essential for code blocks, terminal output, tabular data (such as pricing tables aligned on decimal points), and any context where character position carries semantic meaning. CSS provides the monospace generic family, which maps to Courier New on most systems, but modern monospace stacks prefer Fira Code, JetBrains Mono, or Cascadia Code for their ligature support and improved legibility. In HTML, monospace text should be wrapped in <code> or <pre> elements to preserve semantics alongside visual styling.