Zvětšené písmo webová stránka může být užitečná pro zlepšení dostupnosti a snadného čtení. Díky velké velikosti písma je text snadno čitelný i pro lidi s omezeným zrakem nebo dalekozrakostí.
Nastavení velikosti zvětšeného písma na webové stránce lze použít hypertextový značkovací jazyk-HTML. Existuje několik způsobů, jak tohoto cíle dosáhnout.
Prvním způsobem je použití atributu style značka . Chcete-li to provést, můžete nastavit hodnotu vlastnosti font-size nastavením požadované velikosti v pixelech, procentech nebo jiných měrných jednotkách. Například:
Druhým způsobem je použití vnitřního stylového bloku . Můžete definovat třídu s požadovanými styly a poté ji aplikovat na prvek . Například:
Třetím způsobem je použití externího stylového souboru. Vytvořte samostatný soubor s příponou .CSS, definujte styly v něm a poté jej připojte k Vaší webové stránce pomocí značky . Například:
Uvnitř souboru styles.CSS můžete definovat třídu se správnými vlastnostmi:
Nyní znáte několik způsobů, jak nastavit velikost zvětšeného písma na webové stránce. Vyberte si ten, který vyhovuje vašim potřebám a preferencím, a Vytvořte uživatelský zážitek, který bude dostatečně pohodlný a příjemný na čtení.
Jak nastavím větší velikost písma?
Syntaxe použití vlastnosti font-size je následující:
| Hodnota | Popis |
|---|---|
| pixely (px) | Určuje konkrétní velikost písma v pixelech. Například: font-size: 18px; |
| úroky (%) | Určuje velikost písma vzhledem k velikosti písma nadřazené položky. Například: font-size: 120%; znamená zvýšení velikosti písma o 20% vzhledem k velikosti písma nadřazeného prvku. |
| relativní hodnoty (em, rem) | em a rem jsou relativní jednotky, které umožňují nastavit velikost písma vzhledem k nadřazené položce nebo základní velikosti písma prohlížeče. Například: font-size: 1.2 em; znamená zvýšení velikosti písma o 20% vzhledem k základní velikosti písma. |
Volba správné hodnoty pro vlastnost font-size závisí na požadovaném vizuálním efektu a kontextu použití. Doporučuje se experimentovat s různými hodnotami a vybrat nejvhodnější velikost písma.
Chcete-li tedy nastavit větší velikost písma, použijte vlastnost CSS font-size na požadovanou položku nebo skupinu položek a nastavte správnou hodnotu.
Metoda 1: použití CSS
Chcete-li nastavit velikost zvětšeného písma, musíte do souboru CSS nebo uvnitř značky napsat odpovídající styl style na stránce HTML. Chcete-li například nastavit velikost písma na 20 pixelů, můžeme předepsat následující CSS kód:
V tomto příkladu aplikujeme styl na značku p, který představuje odstavec. Můžete jej vyměnit za jakýkoli jiný volič a změnit velikost písma na správném místě stránky.
Po použití tohoto stylu se text v uvedených značkách zobrazí s velikostí písma uvedenou ve vlastnostech font-size.
Metoda 2: použití atributu "style" v HTML
K nastavení velikosti písma lze použít následující syntaxi:
- značka HTML prvku, na který je třeba použít styl.
velikost je požadovaná velikost písma.
Текст со 20-м размером шрифта
V tomto příkladu bude písmo paragrafu nastaveno na velikost 20 pixelů.
Můžete také nastavit velikost písma v procentech, například:
Текст с увеличенным размером шрифта
V tomto případě se velikost písma zvýší o 50 procent.
Kromě toho můžete použít relativní jednotky měření, jako je "em" nebo "rem", k nastavení velikosti písma v závislosti na velikosti ostatních položek na stránce.
Je důležité si uvědomit, že atribut "style" platí pro každou jednotlivou položku, takže pokud chcete použít změny na celý text na stránce, budete muset přidat atribut "style" ke všem příslušným prvkům.
Metoda 3: Použití JavaScriptu
Tímto způsobem můžeme použít programovací jazyk JavaScript k nastavení velikosti zvětšeného písma na webové stránce. K tomu budeme muset použít metodu getElementById přístup k položce na stránce a metoda style.fontSize pro změnu velikosti písma.
Zde je příklad kódu:
var fontSize = 20;
function increaseFontSize() fontSize += 2;
document.getElementById("myText").style.fontSize = fontSize + "px";
>
function decreaseFontSize() fontSize -= 2;
document.getElementById("myText").style.fontSize = fontSize + "px";
>
Jedná se o text, jehož velikost písma lze zvětšit nebo zmenšit.
V tomto příkladu jsme vytvořili dvě funkce - increaseFontSize a decreaseFontSize, které zvyšují a snižují hodnotu velikosti písma. Poté jsme přidali dvě tlačítka, která při stisknutí evokují příslušné funkce. Paragraf s id "myText" je prvek, jehož velikost písma se bude měnit.