Změna formátu písma na webové stránce může hrát důležitou roli při vytváření jedinečného designu a usnadnění čtení obsahu. Pro začínající webové vývojáře se to může zdát jako obtížný úkol. S několika jednoduchými možnostmi v CSS však můžete snadno změnit velikost, písmo a barvu textu na vaší webové stránce.
V této příručce podíváme se, jak nastavit možnosti stránky pro změnu formátu písma. Ukážeme vám, jak použít vlastnosti CSS, jako je font-size, font-family a color ke změně vzhledu textu.
Než začneme, je důležité si uvědomit, že aplikace vhodného formátu písma je důležitou součástí dosažení lepší čitelnosti textu na vaší webové stránce. Měli byste si vybrat písmo, které je snadno čitelné a odpovídá celkovému stylu vašeho webu.
Prvním krokem ke změně formátu písma je určení velikosti písma. Vlastnost font-size můžete použít k nastavení velikosti písma v pixelech, procentech nebo relativních jednotkách, jako je em nebo rem.
Jak upravit nastavení stránky pro změnu formátu písma
Změnu formátu písma lze provést pomocí kaskádových stylů (CSS). Pro začátek je nutné určit parametry textového bloku (obvykle se to provádí pomocí značky nebo
) a nastavit tomuto bloku jedinečný identifikátor nebo třídu.
Pak musíte vytvořit pravidlo stylu uvnitř tagu nebo externího CSS souboru, použít jej na vybraný textový blok a nastavit požadované možnosti písma, jako je písmo (např. Arial), velikost písma, barva atd.
.my-text-block Пример текста
V tomto příkladu budou všechny textové bloky s třídou "my-text-block" zobrazeny Arial písmem o velikosti 16 pixelů a barvou #3333333.
Kromě toho lze také použít další vlastnosti CSS ke změně formátu písma, jako je tučnost (font-weight), kurzíva (font-style) a podtržení (text-decoration).
Po zadání parametrů stránky pro změnu formátu písma je nutné soubor s příponou uložit .html a otevřete jej v libovolném webovém prohlížeči, abyste viděli výsledek.
Velikost písma
Velikost písma webové stránky lze nastavit pomocí vlastnosti font-size CSS . Umožňuje nastavit velikost písma v pixelech, procentech, em nebo jiných měrných jednotkách.
Příklady hodnot pro vlastnost font-size :
- font-size: 16px; - určuje velikost písma v 16 pixelech;
- font-size: 14pt; - určuje velikost písma ve 14 bodech;
- font-size: 1em; - nastaví velikost písma na stejnou velikost písma rodičovského prvku;
- font-size: 150%; - nastaví velikost písma na 150% základní velikosti;
- font-size: larger; - zvyšuje velikost písma o jednu úroveň;
- font-size: smaller; - snižuje velikost písma o jednu úroveň;
Lze také použít relativní jednotky měření, jako jsou em, rem nebo vw. Umožňují vytvářet responzivní a citlivé stránky.
Je důležité si uvědomit, že pro pohodlí uživatelů je třeba zvolit čitelné velikosti písem a vyhnout se použití příliš malých nebo příliš velkých hodnot.
Barva písma
Syntaxe použití vlastnosti color je následující:
color: hodnota;
Hodnota může být prezentována v několika formátech:
- jmenný formát (např. red) - v angličtině je uveden název barvy;
- hexadecimální formát (např. #ff0000) - uvádí hexadecimální podání barev;
- RGB formát (např. RGB (255, 0, 0)) - udává hodnotu červené, zelené a modré barvy (0 až 255).
Příklad použití vlastnosti color:
p
V tomto příkladu budou mít všechny odstavce na stránce červenou barvu písma.
Při výběru barvy písma je třeba vzít v úvahu jeho viditelnost na pozadí stránky, aby byl text snadno čitelný.
Typ písma
Webové stránky vám umožňují nastavit různé typy písem pro text, abyste jim dodali zvláštní vzhled a zdůraznili styl obsahu.
Pro zadání typu písma se v dokumentu HTML používá prvek . Atribut face označuje název vybraného písma.
Níže je uveden příklad použití:
- - nastaví písmo Arial nebo písmo, které je k dispozici Bezpatkové (sans-serif).
- - nastaví písmo Times New Roman nebo písmo se štítkem (serif).
- - nastavuje písmo Courier New nebo monosirin písmo (monospace).
Všimněte si, že vybrané písmo musí být nainstalováno v počítači uživatele, aby se správně zobrazilo.
Pokud písmo chybí, prohlížeč jej nahradí nejbližším alternativním písmem.
Intersticiální vzdálenost
Mezerník určuje mezeru mezi řádky textu uvnitř prvku. Lze jej změnit pomocí vlastnosti CSS line-height. Hodnota vlastnosti line-height lze nastavit v pixelech, procentech nebo jiných měrných jednotkách.
Nastavení přiměřené meziřádkové vzdálenosti poskytuje čitelnější a srozumitelnější text. Příliš malá rozestupová vzdálenost může způsobit potíže se čtením textu a příliš velká může způsobit nepříjemné vizuální přetečení.
Příklad použití vlastnosti line-height:
V tomto příkladu hodnota vlastnosti line-height rovná se 1.5. To znamená mezikruží uvnitř prvků bude 1,5 krát větší než velikost písma.
Chcete-li nastavit mezikontinentální Vzdálenost v procentech nebo v jiných měrných jednotkách, měla by být hodnota vlastnosti nahrazena line-height na potřebné.
Nastavením vhodné mezi řádky lze dosáhnout optimální čitelnosti textu a zlepšit uživatelský zážitek.
Tučné písmo
Chcete-li změnit písmo na tučné, můžete použít značku strong nebo b. Tyto značky označují text, který musí být zvýrazněn tučným písmem.
Tento text bude zvýrazněn tučným písmem pomocí značky strong.
A tento text bude zvýrazněn tučným písmem pomocí značky b.
Obě značky strong a b plní stejnou funkci a zajišťují stejný výsledek.
Kurzíva
V HTML lze k zvýraznění textu použít kurzívní písmo.
K tomu lze použít značku , který označuje kurzívu.
Tento text zvýrazněno kurzívou.
V důsledku toho získáme:
Tento text zvýrazněno kurzívou.