Forum » Izdelava spletišč » Vodič: Uporaba Google Fonts
Vodič: Uporaba Google Fonts
cungalungaa ::
Vas moti privzeto nastavljena pisava v vašem HTML dokumentu? Mislim, da vsi vemo o čem govorim. Times New Romans.
Obiščemo spletno stran Google fonts. Izberemo pisavo po lastnem okusu. Jaz sem izbral Open Sans. Kliknemo na gumb Use (Uporabi) v desnem spodnjem kotu kot je prikazano na spodnji sliki.
Izberi vse variante pisave (krepko, normalno, ozko idt.).
Ob tem pa moramo spremljati "števec" hitrosti nalaganja strani, ki se z vsako novo dodano varianto pisave poviša. (Nalagalni čas se poveča).
Če na spletni strani želimo prikazovati šumnike in vse posebne znaki, ki jih vključuje slovenščina moramo označiti Latin Extended (latin-ext), kot je prikazano na spodnji sliki.
Na voljo imamo 3 načina vključevanja pisave v spletno strani: kot zunanjo css datoteko ki jo določimo v HTML dokumentu (element <link>), kot zunanjo povezavo do css datoteke, ki jo vključimo v css (@import) ali pa z Javascriptom (funkcija).
V tem vodiču si bomo pogledali le prvi način — s HTML-jem.
Označimo in jo prilepimo v glavo našega HTML dokumenta (<head></head>):
V CSS datoteki v selektorju body dodamo vrstico:
Tukaj si lahko pogledate razliko v pisavah v živo:
#1 korak
Obiščemo spletno stran Google fonts. Izberemo pisavo po lastnem okusu. Jaz sem izbral Open Sans. Kliknemo na gumb Use (Uporabi) v desnem spodnjem kotu kot je prikazano na spodnji sliki.
Izberi vse variante pisave (krepko, normalno, ozko idt.).
Ob tem pa moramo spremljati "števec" hitrosti nalaganja strani, ki se z vsako novo dodano varianto pisave poviša. (Nalagalni čas se poveča).
#2 korak
Če na spletni strani želimo prikazovati šumnike in vse posebne znaki, ki jih vključuje slovenščina moramo označiti Latin Extended (latin-ext), kot je prikazano na spodnji sliki.
#3 korak
Na voljo imamo 3 načina vključevanja pisave v spletno strani: kot zunanjo css datoteko ki jo določimo v HTML dokumentu (element <link>), kot zunanjo povezavo do css datoteke, ki jo vključimo v css (@import) ali pa z Javascriptom (funkcija).
V tem vodiču si bomo pogledali le prvi način — s HTML-jem.
Označimo in jo prilepimo v glavo našega HTML dokumenta (<head></head>):
<!DOCTYPE html>
<html>
<head>
<title>Lepa pisava</title>
<link rel="stylesheet" type="text/css" href="css/master.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>Naslov 1</h1>
<p>Odstavek besediila z lepopisavo</p>
</body>
</html>V CSS datoteki v selektorju body dodamo vrstico:
body {
font-family: 'Open Sans', sans-serif;
}
Tukaj si lahko pogledate razliko v pisavah v živo:
Brez Google Fonts pisave:
http://codepen.io/cungalunga/pen/vEyYXrZ Google Fonts pisavo (Open Sans):
http://codepen.io/cungalunga/pen/gbLOwQVeč vodičev na mojem blogu
Kucoin: https://www.kucoin.com/#/?r=1scgwQR
Netrunner ::
Implementacija google fonts ali font awesome ikon ipd. Je na uradnih straneh zelo dobro in enostavno prikazano. Ne rabiš biti html guru ampak vse kar potrebuješ je osnovno poznavanje angleščine... Kar pa je splošno potrebno če delaš karkoli na tem področju.
Pa ok ... Nekomu bo mogoče prav prišlo, pa še avtor si bo naredil malo reklame za svoj blog.
Srečno 2015
Pa ok ... Nekomu bo mogoče prav prišlo, pa še avtor si bo naredil malo reklame za svoj blog.
Srečno 2015
Zgodovina sprememb…
- spremenilo: Netrunner ()
čuhalev ::
Dvomim, da bi v angleškem besedilu poudarili opcijo Latin Extended (latin-ext), če je potreba po šumnikih. Zato je tole dobro.
cungalungaa ::
Ko sem se jaz začel učiti html ni bilo na internetu nikjer obrazloženo zakaj mi ne prikazuje šumnikov na strani, čeprav jih pisava podpira. Na prvi pogled se vodič zdi nepotreben, ko pa nekdo, ki ne ve kam se obrniti pa pride zelo prav.
Kucoin: https://www.kucoin.com/#/?r=1scgwQR
Netrunner ::
cungalungaa je izjavil:
...ni bilo na internetu nikjer obrazloženo zakaj mi ne prikazuje šumnikov na strani...
To težko verjamem. No saj taki problemčki te utrdijo in se marsikaj navadiš. Dobro je da veš kaj je "latin extendet" in ne samo ga obkljukat ker tako piše :)
no pa ja .. saj razumem za začetnike je težko ...
cungalungaa ::
cungalungaa je izjavil:
...ni bilo na internetu nikjer obrazloženo zakaj mi ne prikazuje šumnikov na strani...
To težko verjamem. No saj taki problemčki te utrdijo in se marsikaj navadiš. Dobro je da veš kaj je "latin extendet" in ne samo ga obkljukat ker tako piše :)
no pa ja .. saj razumem za začetnike je težko ...
Nevem če se znaš postaviti v kožo nekoga, ki ne zna angleško in prvič vključuje fonte v stran. Zato so taki preprosti vodiči lahko uporabni za nekoga.
Kucoin: https://www.kucoin.com/#/?r=1scgwQR
Vzdevek ::
cungalungaa je izjavil:
cungalungaa je izjavil:
...ni bilo na internetu nikjer obrazloženo zakaj mi ne prikazuje šumnikov na strani...
To težko verjamem. No saj taki problemčki te utrdijo in se marsikaj navadiš. Dobro je da veš kaj je "latin extendet" in ne samo ga obkljukat ker tako piše :)
no pa ja .. saj razumem za začetnike je težko ...
Nevem če se znaš postaviti v kožo nekoga, ki ne zna angleško in prvič vključuje fonte v stran. Zato so taki preprosti vodiči lahko uporabni za nekoga.
Vsak, ki se z tem sreča obvlada ang. Vsaj osnove...
čuhalev ::
Ni problem nerazumevanje angleščine, ker lahko besede človek približno smiselno poveže. Česar ne bo uspel ugotoviti, je spoznanje, da so šumniki skriti v latin extended.
Vredno ogleda ...
| Tema | Ogledi | Zadnje sporočilo | |
|---|---|---|---|
| Tema | Ogledi | Zadnje sporočilo | |
| » | Microsoft lošči svojo podoboOddelek: Novice / NWO | 5649 (4515) | JaVonTech |
| » | Trdovratne težave v HTML/CSS-ju (strani: 1 2 )Oddelek: Programiranje | 8566 (6544) | joker16_7 |
| » | Google si je izbral nov logotipOddelek: Novice / Ostale najave | 19555 (15305) | msjr |
| » | Pisave s šumnikiOddelek: Izdelava spletišč | 2274 (2089) | Insan3Lik3 |
| » | Google font - (č,ž,š) delajo local, na hostu pa ne delujejoOddelek: Izdelava spletišč | 2337 (2129) | neoserv |