font-stretch - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti font-stretch nastavujeme zda bude text užší nebo širší. Tuto vlastnost nepodporuje žádný webový prohlížeč!

Hodnoty

ultra-condensed - Udělá text co nejužší.
extra-condensed - Udělá text užší než hodnota condensed ale méně jak ultra-condensed.
condensed - Udělá text užší než hodnota semi-condensed ale méně jak extra-condensed.
semi-condensed - Udělá text jenom trochu úzký.
normal (výchozí) - Vykreslí text normálně.
semi-expanded - Udělá text jenom trochu široký.
expanded - Udělá text širší než hodnota semi-expended ale méně jak extra-expanded.
extra-expanded - Udělá text širší než hodnota expanded ale méně jak ultra-expanded.
ultra-expanded - Udělá text co nejširším.
initial - Nastaví vlastnost na výchozí hodnotu (tedy na normal).
inherit - Hodnota se zdědí z rodičovského elementu.

Ukázka

Jelikož tuto vlastnost nepodporuje žádný prohlížeč, nemůžeme si ji ani ukázat na příkladě. CSS 3 je ale velmi praktické a proto si můžeme udělat text úzký či široký pomocí vlastnosti transform a její hodnoty scale.

Vytvořme si dva odstavce. Jeden s úzkým textem a druhý se širokým. Každý bude mít svoje id a to podle toho, co bude představovat. Širšímu textu (#sirsi) nastavíme vlastnost display na hodnotu inline-block kvůli lepšímu zobrazení.

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <style>
                #uzsi
                {
                        transform: scale(1, 2);
                        -webkit-transform:scale(1, 2);  /* Chrome, Safari, Opera */
                        -moz-transform: scale(1, 2);    /* Mozilla Firefox */
                        -ms-transform: scale(1, 2);     /* IE 9 */
                }
                #sirsi
                {
                        display: inline-block;
                        transform: scale(2, 1);
                        -webkit-transform:scale(2, 1);  /* Chrome, Safari, Opera */
                        -moz-transform: scale(2, 1);    /* Mozilla Firefox */
                        -ms-transform: scale(2, 1);     /* IE 9 */
                        margin-left: 70px;
                }
                </style>
                <title>font-stretch</title>
        </head>
        <body>
                <p id="uzsi">Tento text bude úzký.</p>
                <p id="sirsi">Tento text bude širší.</p>
        </body>
</html>

Výsledek:

Vlastnost font-stretch v CSS 3 - Text a písmo - CSS vlastnosti

Nedostatek této náhradní vlastnosti je, že roztahuje element a ne text. Kvůli tomu musíme nastavit širšímu textu vlastnost margin-left, jinak by kousek elementu nešel vidět.

Více k písmu najdete u vlastnosti font.

Článek pro vás napsal Jan Lupčík

Autor se primárně věnuje vývoji webových stránek a aplikací v PHP (framework Laravel) a je jedním z herních vývojářů komunitní modifikace TruckersMP.

Aktivity

Nejčastěji vyhledáváné

font-stretch - Český CSS 3 manuál

Hodnoty

Ukázka