Tento blog bude hovořit o použití pravidla CSS @font-face.
Co je pravidlo CSS @font-face?
Pravidlo @font-face v CSS se používá k vytváření vlastních písem pro naše projekty. Tato písma lze načíst ze serveru nebo písem nainstalovaných v systému.
Jak používat pravidlo CSS @font-face?
Syntaxe pro použití pravidla CSS @font-face je uvedena níže:
@font-face {
rodina písem : MyNewFont ;
src : url ( )
}
Pravidlo @font-face je definováno zadáním hodnoty ve vlastnosti font-family a související URL, odkud se toto písmo nachází, jako atribut src.
Příklad
V níže uvedeném příkladu přizpůsobíme písma. Chcete-li to provést, nejprve si stáhněte písma z prohlížeče a přidejte je do složky svého projektu. Pokud používáte písma ze serveru, můžete také použít odkazy.
Nejprve přidejte značky
a a poté použijte k přizpůsobení písem pro každý z nich. Implementujme výše popsaný scénář ve třech krocích.
Krok 1: Přidejte prvky do souboru HTML
Krok 1: Přidejte prvky do souboru HTML
V HTML do sekce
přidejte a pro přidání obsahu souvisejícího s webovou stránkou:
< h2 > Vítejte v Linuxhintu! < / h2 >
< h1 > Vítejte v Linuxhintu! < / h1 >
Krok 2: Zadejte pravidlo @font-face v CSS
< h2 > Vítejte v Linuxhintu! < / h2 >
< h1 > Vítejte v Linuxhintu! < / h1 >
Krok 2: Zadejte pravidlo @font-face v CSS
Chcete-li specifikovat pravidlo, klíčové slovo „ @font-face ” se používá v CSS. Do jeho složených závorek přidejte vlastnost font-family a jako hodnotu přidejte název písma. Poté pomocí vlastnosti src zadejte cestu URL staženého písma:
@font-face {
rodina písem : myfont ;
src : url ( '/fonts/Batuphat\ Script.otf' ) ;
}
Podobně přidáme další přizpůsobený blok písem:
@font-face {rodina písem : myfont2 ;
src : url ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
Nyní použijte styl na prvky
a .
Prvek stylu h2
h2 {
rodina písem : myfont ;
velikost písma : 50 pixelů ;
}
Prvek stylu h2
h2 {rodina písem : myfont ;
velikost písma : 50 pixelů ;
}
Vlastnosti použité na prvek
jsou vysvětleny níže:
- “ rodina písem “ je nastaven s hodnotou “ myfont “, což je to, co jsme deklarovali v pravidle @font-face.
- “ velikost písma Vlastnost ” nastaví velikost písma na 50px.
Styl prvek h1
h1 {
rodina písem : myfont2 ;
velikost písma : 70 pixelů ;
barva : hnědý ;
}
Zde je „ barva Vlastnost ” se používá k obarvení písma.
Z níže uvedeného obrázku je vidět, že tagy
a jsou úspěšně stylizovány pomocí nově deklarovaných písem:
Poskytli jsme metodu pro použití pravidla CSS @font-face.
Závěr
Styly písem hrají důležitou roli při vytváření estetické přitažlivosti jakékoli aplikace. Náš systém má omezené styly písem, zatímco vývojář potřebuje různá písma, aby do svých webových aplikací přidal zkrášlení. K tomu nám CSS umožňuje použít pravidlo @font-face pro přidávání vlastních písem. Tento článek demonstroval pravidlo @font-face, pomocí kterého si můžete přizpůsobit styl písma v naší aplikaci.