W3.CSS Písma Google
S W3.CSS je extrémně snadné přidávat nová písma.
- Velmi snadné použití (pouze CSS a HTML)
- Neomezené používání externích knihoven písem (jako Google Fonts)
- Funguje ve všech moderních prohlížečích
Tohle je Roboto
Tohle je Sofie
Sofie v plamenech
Tvorba webu!
Tvorba webu!
Tvorba webu!
Tvorba webu!
Tvorba webu!
Používání písem Google
Písma Google jsou k použití zdarma a můžete si vybrat z více než 1000 písem.
V záhlaví své webové stránky odkaz na písmo Google:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
Poté přidejte CSS o tom, kde jej použít:
body,h1,h2,h3,h4,h5,h6 {font-family: Roboto, sans-serif;}
Další příklad
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
body,h1,h2,h3,h4,h5,h6 {font-family: Sofia, serif;}
Vytvořte třídu písem
V záhlaví své webové stránky odkaz na písmo Google:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
Poté vytvořte třídu písem:
Příklad
.w3-sofia {
font-family: Sofia, cursive;
}
Na své webové stránce použijte třídu písma:
Příklad
<p class="w3-sofia">Making the Web!</p>
Tvorba webu!
Příklad
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
.w3-tangerine {
font-family: 'Tangerine', serif;
}
<p class="w3-tangerine">Making the Web Beautiful!</p>
Tvorba webu!
Příklad
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
Tvorba webu!
Příklad
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple">
Tvorba webu!
Příklad
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
Tvorba webu!