Při vývoji webu poskytuje správné použití stylingu písma atraktivní vzhled aplikace. Tyto styly písem poskytují vizuální vodítko o pořadí čtení dokumentu. Například styl písma záhlaví dokumentu musí být tučný a významný od ostatních. Styl také pomáhá odlišit důležitý obsah od ostatních.
Výsledky učení tohoto článku jsou:
- Co jsou webová písma Google?
- Jak importovat písma Google do HTML?
- Jak používat písma Google v souboru CSS?
Co jsou webová písma Google?
Webové písmo Google je knihovna s otevřeným zdrojovým kódem, která obsahuje stovky stylů písem nebo rodin. Poskytuje také rozhraní API, která nám pomáhají používat webová písma s Androidem a CSS. Písma Google jsou mnohem lehčí než jiné knihovny písem a jsou k dispozici zdarma pro firemní použití. Ty se snadněji implementují na jakýkoli web.
CSS standardně nabízí styly fantasy, patka, bezpatka, kurzíva a jednoprostorové písmo. Google Fonts lze použít, pokud chcete používat jiné styly písem.
Jak importovat písma Google do HTML?
Chcete-li používat písma Google na stránce HTML, proveďte následující kroky.
Krok 1: Vyberte rodinu písem
Nejprve otevřete Písma Google oficiální webové stránky a vyberte písmo, které se vám líbí. Vybrali jsme například „ Humr dva ” rodina písem:
Krok 2: Vyberte styly
Dále přejděte dolů a zobrazte seznam stylů. Přidejte je do své sbírky kliknutím na „ + ' podepsat:
Krok 3: Zobrazte vybrané rodiny
Chcete-li zobrazit vybrané rodiny, klikněte na ikonu zvýrazněnou níže:
Krok 4: Zkopírujte odkaz pro vložení do HTML
Poté přejděte dolů a zkopírujte odkaz na rodinu písem pomocí zvýrazněného „ kopírovat ikona “:
Jak používat písma Google v souboru CSS?
Chcete-li použít kopii písem Google v CSS pro stylování, projděte si uvedené příklady.
Příklad 1
Zahrnout „ ” prvek k určení obsahu nebo odstavce:
< p > “Nejlepší výukový web” p > Chcete-li importovat písma Google, vložte zkopírovaný kód do „
Prvek stylu „p“.
p {rodina písem: 'Homr dva' , kurzíva;
text-align: center;
velikost písma: 45px;
barva: rgba ( 64 , 3 , 162 , 0,8 ) ;
}
Následující vysvětlené vlastnosti CSS jsou aplikovány na HTML „ značka ”:
- “ rodina písem ' je přiřazena hodnota ' ‚Humr dva‘, kurzíva “. Tato rodina písem je importována z Google Fonts.
- “ zarovnání textu ” upraví zarovnání textu.
- “ velikost písma “ určuje velikost písma.
- “ barva “ nastaví barvu písma.
Obrázek ukazuje, že rodina písem byla úspěšně použita:
Příklad 2
Vezměme si další příklad pro import „ Nerko One “ Písmo Google. Pro tento účel znovu vložte kód pro URL fontu Google „Nerko One“ do pole „
Prvek stylu „p“.
p {rodina písem: 'Nerko One' , kurzíva;
váha písma: 300 ;
velikost písma: 30px;
}
' rodina písem “, “ tloušťka písma ', a ' velikost písma “ vlastnosti jsou aplikovány na HTML “ prvek.
Výstup
Naučili jsme vás, jak importovat webová písma Google do souboru CSS.
Závěr
Chcete-li importovat písma Google do CSS, nejprve navštivte stránku Písma Google oficiální webové stránky a vyberte styl písma. Poté zkopírujte kód, který obsahuje „ @import “ a vložte jej do souboru CSS nebo do „