Jak nejlépe využít písma v CSS?

Tento článek vám představí jednoduché, ale důležité téma, kterým je Fonts In a také vám poskytne praktickou ukázku na toto téma. V tomto článku se budeme zabývat následujícími ukazateli,

• Písma v CSS
• Atributy v písmu CSS
• atribut stylu písma
• atribut hmotnosti písma
• atribut velikosti písma
• atribut font-family

Webové stránky nesou obsah ve formě obrázků, zvuku, videa a textového obsahu. Většina webových stránek se však stále spoléhá na text jako na převládající formát. Je to proto, že prostý text nabízí některé velmi významné výhody.

Nerušivá čitelnost - Chcete-li zkontrolovat nejnovější skóre zápasu, když jste v kanceláři. Je zřejmé, že chcete rychlou aktualizaci textu, ne hlučné video!
Nízký požadavek na šířku pásma sítě - textový obsah lze načíst i v oblastech se špatným připojením k internetu, zatímco Rich Media nikoli.
Přátelské prohledávání - Webové stránky neustále sledují, jak snadno si jejich obsah všimnou ve vyhledávačích. K tomu je nejvhodnější text, alespoň dokud AI úplně nepřevezme internet!

Při formátování textového obsahu mají weboví designéři k práci jen několik parametrů - písmo, zarovnání, zvýraznění a barvu. Výběr správného písma pro text je kritickou volbou. Standardní praxí je použití značek písma CSS k definování písem pro text na stránkách HTML.
Pokud jste ve světě programování HTML nováčkem, zde si můžete udělat základní úvodní prohlídku. Možná budete chtít přečíst základní informace o CSS, než se začnete učit o písmech CSS.

Komplexní výukový program CSS najdete v kurzu Edureka CSS pro začátečníky. Získáte vynikající heads-up o způsobu, jakým má být CSS použit k rozšíření webového designu HTML.

Pokračujeme tímto článkem o Fontech v CSS

Písma v CSS

Písmo je v podstatě sada charakteristik spojených se zobrazením textu. Fonty se navzájem liší svou velikostí, odsazením, šířkou, sklonem atd. Začněme základním zobrazením textu v různých písmech.

Příklad 1: Nadpisy a odstavce v různých písmech

body {background-color: lightblue} h1 {font: bold 30px arial, sans-serif} h2 {font: 15px verdana} p {font: italic bold 12px / 30px Georgia, serif}
Odstavec psaný tučným písmem Georgia
 

 Příklad 1: Výstup 

V příkladu 1 máme 3 různé řádky textu v různých písmech. Všimněte si, že každé z písem se liší svou šířkou znaků, odsazením atd.

Pokračujeme tímto článkem o Fontech v CSS

Atributy v písmu CSS

Fonty CSS mají 4 hlavní atributy - styl, váhu, velikost a rodinu. Atribut stylu označuje normální nebo kurzíva. Váha zobrazuje písmo jako prosté nebo tučné. Hmotnost může být také vyjádřena číselně. Velikost je prostě velikost písma, čím větší je velikost, tím větší je vzhled textu. Existuje několik způsobů, jak lze přiřadit velikost písma, podrobné popisy jsou uvedeny v dalších částech. Atribut family je přiřadit názvu písma textu.

V příkladu 1 jsme použili různé názvy písem pro nadpisy a odstavce. Pod značkami h1 a p vidíme dva názvy písem, zatímco značky h2 pouze jedno písmo. Toto je definice rodiny písem, více o tom později.

Pokračujeme tímto článkem o Fontech v CSS

atribut stylu písma:

Lze nastavit dva základní styly: „normální“ a „kurzíva“. Kurzíva má být kurzívová a má sklon. Normální je výchozí možnost, která je rovná. Existuje další méně používaná možnost zvaná šikmé, která se u většiny písem podobá možnosti kurzívou. Styl můžete také nastavit na „dědit“, aby převzal styl písma z nadřazeného prvku.

Pokračujeme tímto článkem o Fontech v CSS

atribut font-weight:

Tento atribut rozhoduje o tom, zda by písmo mělo vypadat tlusté nebo tenké. Lze jej nastavit na „normální“ nebo „tučné“. Výchozí hodnota je normální. Tuto hodnotu lze také nastavit jako číselnou. Váha 400 představuje normální hodnotu a 700 je označena tučně. Existuje několik dalších nastavení (od 100 - velmi světlé až po 900 - velmi tučné), ale nejsou podporována všemi písmy. Všechny možnosti hmotnosti jsou uvedeny v příkladu 3.

Pokračujeme tímto článkem o Fontech v CSS

jak používat db prohlížeč pro sqlite

atribut velikosti písma:

Atribut size lze nastavit několika způsoby. Níže uvádíme tyto způsoby.
● Vymenovaná hodnota, například „střední“, „velká“. Ve skutečnosti, stejně jako velikosti oděvů, se hodnoty mohou pohybovat od XX Malé do XX Velké!
● Nastavit vzhledem k nadřazenému prvku jako „větší“ nebo „menší“.
● Procento velikosti nadřazeného prvku.
● Nastavit jako „dědit“ pro přímé převzetí velikosti nadřazeného prvku.
● Jako absolutní hodnota v jednotkách px (pixely), pt (body) nebo cm (centimetr)
„Střední“ je výchozí hodnota nastavená pro tento parametr.

Pokračujeme tímto článkem o Fontech v CSS

atribut font-family:

V HTML je rodina fontů CSS určena k nastavení názvu písma. Do značky můžete buď vložit jediný název písma. Nebo můžete přiřadit více hodnot jako seznam rodin fontů, který definuje prioritu, ve které má prohlížeč zvolit písmo.
Seznam má prioritu zleva doprava ve formě záložního systému. Je vybrána první hodnota, pokud je k dispozici, nebo ovládací prvek přejde na další, dokud není dosaženo konce seznamu. Výchozí rodina písem je definována v předvolbách prohlížeče.
Skupiny písem CSS jsou 2 typů - obecné rodiny a rodiny písem.
● Obecné rodiny - na základě některých obecných charakteristik jsou písma seskupena do skupin „serif“, „sans serif“, „monospace“ atd. Například Sans serif znamená písma bez patkového stylu.
● Jména rodin - písma patřící do konkrétních hierarchií rodin. Times, Arial, Courier jsou všechny rodiny písem a Times New Roman je příkladem písma rodiny Times.
Různé možnosti použití rodiny písem jsou uvedeny v příkladu 4 níže.

Některé společné body k poznámce

● Stejně jako několik dalších vlastností CSS se některá nastavení písma liší v různých prohlížečích. Před použitím některých výjimečných nastavení písma zkontrolujte podporu prohlížeče.
● Nastavení písma můžete nastavit samostatně pomocí jednotlivých značek stylu písma, hmotnosti písma atd. Alternativně, pokud dáváte přednost kompaktnímu kódu, můžete použít zkrácený atribut písma se všemi hodnotami ve stejném řádku.
● V uživatelských scénářích, kde chcete, aby se velikost písma lišila v závislosti na velikosti prohlížeče, existuje užitečné nastavení velikosti písma, které se nazývá responzivní nastavení písma. Lze jej nastavit pomocí jednotky vw, což znamená „šířka výřezu“. Tímto způsobem bude velikost textu odpovídat velikosti okna prohlížeče.

Doufám, že jste našli informace, které jste hledali, na Fonts In CSS. Podělte se s námi o své zkušenosti v sekci komentáře níže. Šťastné navrhování!

Pokud se chcete dozvědět více o vývoji webu, podívejte se na podle Edureka. Osvědčení o školení pro vývoj webových aplikací vám pomůže Naučte se, jak vytvářet působivé webové stránky pomocí HTML5, CSS3, Twitter Bootstrap 3, jQuery a Google API a jak je nasadit do služby Amazon Simple Storage Service (S3).