Typography

Avaa ChatGPT:ssä

Typografia-tunnukset käytetään yhtenäisten fonttityylien ylläpitämiseen sovelluksessasi.

Fonttiperhe

Fonttiperheominaisuuksia käytetään määrittämään priorisoitu luettelo fonttiperhenimistä.

Järjestelmän fonttipinoa käytetään oletuksena:

• Segoe UI Windowsissa
• Roboto Androidissa ja Chrome OS:ssä
• San Francisco macOS:ssa ja iOS:ssa
• Muilla järjestelmillä käytetään varafontteina Helvetica, Arial.

Voit soveltaa tai muuttaa fonttiperhettä käyttämällä --dwc-font-family -muokattavaa ominaisuutta.

Esimerkki

:root {
  --dwc-font-family: "Roboto", sans-serif;
}

Muuttujat

Muuttuja	Oletusarvo	Esimerkki
--dwc-font-family-sans	-apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'	Mustan kvartsin sfinksi, tuomitse vanni.
--dwc-font-family-mono	Menlo, Monaco, 'Courier New', monospace	Mustan kvartsin sfinksi, tuomitse vanni.
--dwc-font-family	var(--dwc-font-family-sans)	Mustan kvartsin sfinksi, tuomitse vanni.

Fonttikoko

Fonttikoko-ominaisuudet määrittävät joukon fonttikokoja valittavaksi. s on normaali koko ja sitä käytetään useimmissa komponenteissa oletuksena. Kaikki fonttikoot on määritetty em-yksiköissä.

EM-yksikkö

em on suhteellinen pituusyksikkö. Se on suhteellinen vanhemman fonttikoon osalta typografisissa ominaisuuksissa, kuten font-size, ja elementin oman fonttikoon osalta muissa ominaisuuksissa, kuten leveys.

Esimerkki

.title {
  font-size: var(--dwc-font-size-3xl);
}

Muuttujat

Muuttuja	Oletusarvo	Esimerkki
--dwc-font-size-2xs	0.75rem	Aa
--dwc-font-size-xs	0.813rem	Aa
--dwc-font-size-s	0.875rem	Aa
--dwc-font-size-m	1rem	Aa
--dwc-font-size-l	1.125rem	Aa
--dwc-font-size-xl	1.375rem	Aa
--dwc-font-size-2xl	1.75rem	Aa
--dwc-font-size-3xl	2.25rem	Aa
--dwc-font-size	var(--dwc-font-size-s)	Aa

Fonttipaino

Fonttipaino CSS-ominaisuus asettaa fontin painon (tai paksuuden).

Esimerkki

p {
  font-weight: var(--dwc-font-weight-semibold);
}

Muuttuja	Oletusarvo	Esimerkki
--dwc-font-weight-lighter	200	Aa
--dwc-font-weight-light	300	Aa
--dwc-font-weight-normal	400	Aa
--dwc-font-weight-semibold	500	Aa
--dwc-font-weight-bold	700	Aa
--dwc-font-weight-bolder	800	Aa

Rivikorkeus

Rivikorkeus CSS-ominaisuus asettaa riviboksin korkeuden. Sitä käytetään yleisesti tekstirivien välin asettamiseen.

Esimerkki

p {
  line-height: var(--dwc-font-line-height-m);
}

Muuttujat

Muuttuja	Oletusarvo	Esimerkki
--dwc-font-line-height-2xs	0.95	Mustan kvartsin sfinksi, tuomitse vanni. Mustan kvartsin sfinksi, tuomitse vanni.
--dwc-font-line-height-xs	1.1	Mustan kvartsin sfinksi, tuomitse vanni. Mustan kvartsin sfinksi, tuomitse vanni.
--dwc-font-line-height-s	1.25	Mustan kvartsin sfinksi, tuomitse vanni. Mustan kvartsin sfinksi, tuomitse vanni.
--dwc-font-line-height-m	1.375	Mustan kvartsin sfinksi, tuomitse vanni. Mustan kvartsin sfinksi, tuomitse vanni.
--dwc-font-line-height-l	1.5	Mustan kvartsin sfinksi, tuomitse vanni. Mustan kvartsin sfinksi, tuomitse vanni.
--dwc-font-line-height-xl	1.75	Mustan kvartsin sfinksi, tuomitse vanni. Mustan kvartsin sfinksi, tuomitse vanni.
--dwc-font-line-height-2xl	2	Mustan kvartsin sfinksi, tuomitse vanni. Mustan kvartsin sfinksi, tuomitse vanni.
--dwc-font-line-height	var(--dwc-font-line-height-m)	Mustan kvartsin sfinksi, tuomitse vanni. Mustan kvartsin sfinksi, tuomitse vanni.