Typography
Typografia-tokeneita käytetään säilyttämään johdonmukainen fontti-estetiikka sovelluksessasi.
Fonttiperhe
Fonttiperheominaisuudet määrittävät priorisoidun luettelon fonttiperhenimistä.
Järjestelmän fonttipinoa käytetään oletuksena system-ui, joka automaattisesti ratkaisee alustan natiivin fontin:
San FranciscomacOS:llä ja iOS:lläSegoe UIWindowsissaRobotoAndroidissa ja Chrome OS:ssä
Voit soveltaa tai muuttaa fonttiperhettä käyttämällä --dwc-font-family mukautettua ominaisuutta.
Esimerkki
:root {
--dwc-font-family: "Roboto", sans-serif;
}
Muuttujat
| Muuttuja | Oletusarvo |
|---|---|
--dwc-font-family-sans | system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
--dwc-font-family-mono | ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace |
--dwc-font-family | var(--dwc-font-family-sans) |
Fonttikoko
Fonttikoko-ominaisuudet määrittävät valittavissa olevan fonttikokojen joukon. m on vakio koko ja sitä käytetään useimmissa komponenteissa oletuksena. Kaikki fonttikoot on määritelty rem-yksikköinä.
rem on suhteellinen pituusyksikkö. Se on suhteessa fonttikokoon juurielementissä (<html>), joka oletusarvoisesti on 16px useimmissa selaimissa.
Esimerkki
.title {
font-size: var(--dwc-font-size-3xl);
}
Muuttujat
| Muuttuja | Oletusarvo | Laskettu (16px juurella) |
|---|---|---|
--dwc-font-size-3xs | 0.625rem | 10px |
--dwc-font-size-2xs | 0.6875rem | 11px |
--dwc-font-size-xs | 0.75rem | 12px |
--dwc-font-size-s | 0.8125rem | 13px |
--dwc-font-size-m | 0.875rem | 14px |
--dwc-font-size-l | 1rem | 16px |
--dwc-font-size-xl | 1.25rem | 20px |
--dwc-font-size-2xl | 1.625rem | 26px |
--dwc-font-size-3xl | 2.125rem | 34px |
--dwc-font-size | var(--dwc-font-size-m) | 14px |
Fonttipaino
Fonttipaino CSS-ominaisuus asettaa fontin painon (tai paksuuden).
Esimerkki
p {
font-weight: var(--dwc-font-weight-semibold);
}
| Muuttuja | Oletusarvo |
|---|---|
--dwc-font-weight-thin | 100 |
--dwc-font-weight-lighter | 200 |
--dwc-font-weight-light | 300 |
--dwc-font-weight-normal | 400 |
--dwc-font-weight-medium | 500 |
--dwc-font-weight-semibold | 600 |
--dwc-font-weight-bold | 700 |
--dwc-font-weight-bolder | 800 |
--dwc-font-weight-black | 900 |
--dwc-font-weight | var(--dwc-font-weight-normal) |
Rivikorkeus
Rivikorkeus CSS-ominaisuus asettaa riviboksin korkeuden. Sitä käytetään yleisesti tekstirivien välimatkan asettamiseen.
Esimerkki
p {
line-height: var(--dwc-font-line-height-m);
}
Muuttujat
| Muuttuja | Oletusarvo |
|---|---|
--dwc-font-line-height-3xs | 1 |
--dwc-font-line-height-2xs | 1.1 |
--dwc-font-line-height-xs | 1.25 |
--dwc-font-line-height-s | 1.375 |
--dwc-font-line-height-m | 1.5 |
--dwc-font-line-height-l | 1.625 |
--dwc-font-line-height-xl | 1.75 |
--dwc-font-line-height-2xl | 1.875 |
--dwc-font-line-height-3xl | 2 |
--dwc-font-line-height | var(--dwc-font-line-height-xs) |