字型系列font-family
Setting the font for an element.
Overview
| Class | Declarations |
|---|---|
font:sans | font-family: var(--font-family-sans);
|
font:serif | font-family: var(--font-family-serif);
|
font:mono | font-family: var(--font-family-mono);
|
font-family:<value> | font-family: <value>;
|
Examples
Basic usage
Use tokens like font:sans, font:serif and font:mono to set font families for elements.
<p class="font:sans">Heavy boxes perform quick waltzes and jigs.</p><p class="font:serif">Heavy boxes perform quick waltzes and jigs.</p><p class="font:mono">Heavy boxes perform quick waltzes and jigs.</p>Set the font family
Set the typeface of an element using the font-family: syntax.
<p class="font-family:cursive">Heavy boxes perform quick waltzes and jigs.</p>In practice, you wouldn't arbitrarily set the font family within the template; instead, you would unify your fonts through custom fonts.
Apply fonts globally
Relying on the font-family inherited behavior, you can set the entire page font in <body>.
<body class="font:sans">…</body>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="font:mono:hover font:mono@sm font:mono@dark font:mono@print">…</div>Apply fonts to specified elements
Use the _:is(code,pre) to select specified elements and apply the font.
<body class="font:mono_:is(code,pre)">…</body>Resolve whitespaces in the value
Whitespace is used in the class attribute of the template to separate different classes. To replace whitespaces with non-breaking spaces \00a0.
<p class="font-family:'Open\00a0Sans'">…</p>Is it not very kind to use \00a0 in markup?
Predefine your font tokens without \00a0.
@theme { --font-family-open-sans: Open Sans; }Apply your custom fonts:
<p class="font:open-sans">…</p>Customization
Use custom fonts
Customize your font tokens by defining theme tokens. For example, add Inter as the general font and Fira Code as the code font.
@theme { --font-sans: "Inter"; --font-mono: "Fira Code"; }Apply the defined font-family variables. For example, presetting the global fonts in <body>:
<body class="font:sans font:mono_:is(code,pre) font-feature-settings:'salt'">…</body>Don't forget to add the font faces.
Google fonts
The fastest way to declare custom font faces is through Google Fonts.
<!DOCTYPE html><html lang="en"><head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> </head></html>Self-hosted fonts
You can also self-host the fonts via native CSS, as usual.
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/Inter-Regular.woff2") format("woff2");}