Wygląd

Font

Ustawienia czcionki

`font`

Ustawienie czcionki. Dodanie czcionki wymaga wcześniejszego zdefiniowania zmiennej CSS w której zapisana zostanie jego definicja.

Przykładowa definicja obramowania.

:root {
    --font--text: var(--font-weight--regular) var(--font-size--text)/1.5 var(--font-family--base);
    /* opcjonalne ustawienie letter-spacing */
    --font--text-letter-spacing: -2%;
}

Poprzedź nazwę zmiennej przez --font--, aby móc korzystać tylko z nazwy fonta. Dzięki temu klasa dla zmiennej --font--{name} może skorzystać ze skrótowego zapisu --f--{name}

Klasa	Styl CSS
`f--<var>`	`font: var(--font--<var>, var(--<var>)); letter-spacing: var(--font--<var>-letter-spacing, var(--<var>-letter-spacing));`

`font-weight`

Ustawianie grubości czcionki

Klasa	Styl CSS
`fw-normal`	`font-weight: normal;`
`fw-bold`	`font-weight: bold;`
`fw-lighter`	`font-weight: lighter;`
`fw-bolder`	`font-weight: bolder;`
`fw-<int>`	`font-weight: <int>;`
`fw--<var>`	`font-weight: var(--font-weight--<var>, var(--<var>));`

`font-size`

Ustawianie rozmiaru czcionki oraz line-height

Klasa	Styl CSS
`fs-sm`	`font-size: .875rem; font-size: 1rem;`
`fs-base`	`font-size: 1rem; font-size: 1.5rem;`
`fs-lg`	`font-size: 1.125rem; font-size: 1.5rem;`
`fs-xl`	`font-size: 1.25rem; font-size: 1.75rem;`
`fs-2xl`	`font-size: 1.5rem; font-size: 2rem;`
`fs-3xl`	`font-size: 1.875rem; font-size: 2.25rem;`
`fs-4xl`	`font-size: 2.25rem; font-size: 2.5rem;`
`fs--<var>`	`font-size: var(--font-size--<var>, var(--<var>)); line-height: 1.5;`
`fs--<var>/<int>`	`font-size: var(--font-size--<var>, var(--<var>)); line-height: <int>/100;`
`fs--<var>/-<var-2>`	`font-size: var(--font-size--<var>, var(--<var>)); line-height: var(--<var-2>);`
`fs--<int>`	`font-size: <int> * 0.25rem;`
`fs--<int-1>/<int-2>`	`font-size: <int-1> * 0.25rem; line-height: <int>/100;`

<div class="p-6">
    <p>fs-6/200: font-size: 1.5rem, line-height: 2</p>
    <p class="fs-6/200 bgcolor-black/10">Przykładowy tekst</p>
    <p>
        <b>fs--small/-line-height--small</b>
:
        <br>
font-size: var(--font-size--small, var(--small));
        <br>
line-height: var(--line-height--small);
    </p>
    <p class="fs--small/-line-height--small bgcolor-black/10">Przykładowy tekst</p>
    <p>
        <b>fs--small</b>
:
        <br>
font-size: var(--font-size--small, var(--small));
        <br>
line-height: 1.5;
    </p>
    <p class="fs--small bgcolor-black/10">Przykładowy tekst</p>
    <p>
        <b>fs--small/200</b>
:
        <br>
font-size: var(--font-size--small, var(--small));
        <br>
line-height: 2;
    </p>
    <p class="fs--small/200 bgcolor-black/10">Przykładowy tekst</p>
</div>