Ismerje meg a Google Web Betűkészleteket

Több mint 530 ingyenes internetes betűtípuscsaládhoz szeretne hozzáférni? Jó, akkor tudnia kell a Google Web Fonts-ról; része a Google Developer API-nak, és hozzáférést biztosít a weboldal dokumentumaiban használható kiváló minőségű web-betűtípusokhoz. Nem csak a webhelyén vagy a blogjain használt betűkészleteket használhatja, hanem a számítógépre vagy a szerverre letölthetők, és felhasználhatók a helyi programokban, például asztali kiadói vagy képalkotó szoftveralkalmazásokban.

A Google Web Fonts használatának számos előnye a magas színvonalú nyílt forrású betűkészletek széles választéka, a szinte minden böngészővel és mobil eszközzel való kompatibilitás, valamint az egyszerű megvalósítás.

A Google Web Fonts API kompatibilis az alább felsorolt ​​böngészőkkel, és ha van olyan felhasználó, aki továbbra is élvezi az IE korai verzióját, érdemes segíteni nekik a frissítésben.

  • Google Chrome: 4.249.4 vagy újabb verzió
  • Mozilla Firefox: verzió: 3.5+
  • Apple Safari: 3.1 vagy újabb verzió
  • Opera: 10.5 vagy újabb verzió
  • Microsoft Internet Explorer: 6 vagy újabb verzió

A Google Web Fonts API következetesen működik a jelenlegi mobil operációs rendszerek túlnyomó részén, beleértve az Android 2.2 vagy újabb és az iOS 4.2 vagy újabb rendszereket (iPhone, iPad, iPod); a korábbi iOS verziók támogatása azonban korlátozott.

A Google Web Fonts API használata

# 1 Válassza ki a használni kívánt betűtípust a Google Web Fonts könyvtárból.

Ebben az esetben az Open Sans lehetőséget választottam . Két lehetőség közül választhat: Válassza ki a Hozzáadás a gyűjteményhez gombot, majd válassza az Használat lehetőséget az oldal alján található láblécből, vagy nyissa meg a "Gyors használat" ikont, amely szintén odaér (a jobb oldalon látható).

# 2 A "Gyors használat" oldalon kiválaszthatja, hogy melyik stílust kívánja használni. Kiválaszthat egyet vagy az összeset, azonban túl sok betűstílus használatával lelassíthatja a weboldalak megjelenítését, ezért mindenképpen válassza ki azokat a stílusokat, amelyeket valójában használni fog. Az Open Sans demonstrációban az alapértelmezett stílus a Normal 400, amint az az alábbi C ábrán látható.

C. ábra

# 3 Válassza ki a webhelyéhez hozzáadandó kódot három lehetőséggel: Normál, @import és JavaScript. A betűtípus beágyazására a weboldalra csak másolja a kiválasztott kódot a HTML-dokumentumba. Ebben az esetben a stíluslap hivatkozásának szokásos kódját választottam meg, az alábbi D. ábrán látható módon.

D. ábra

És hozzáadva a HTML dokumentumhoz, mint ilyen jelenik meg:

A helyi stíluslap hivatkozásával együtt:

# 4 Integrálja a betűtípust a CSS stíluslapjába minden olyan tartalomhoz, amelyet hozzá szeretne rendelni az adott betűkészlethez.

Az alábbi CSS-kódrészlet látható:

 h1, p {betűkészlet-család: 'Open Sans', sans-serif; } 

Amint az élő HTML dokumentumot a böngészőben tekintik meg, le fogja húzni a Google stíluslapjának egy példányát, hogy a stílusok a fent említett gyorshasználati lépések során kiválasztott módon jelenjenek meg. Ebben az esetben az alábbiakban megjelenik a normál stílusú és 400 betűsúlyú Open Sans betűkészlet Google CSS-kódja:

 @ font-face { 
 betűtípus-család: 'Open Sans'; 
 betűtípus: normál; 
 betűsúly: 400; 
 src: helyi ('Open Sans'), helyi ('OpenSans'), url (http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) formátum; 
 } 
A demonstrációs HTML kimenet az E ábrán látható :

E ábra

Fejlett technikák

A Google WebFont Loader a JavaScript könyvtár, amely több irányítást biztosít a Google Fonts API betöltéséhez, és lehetővé teszi több web-betűkészlet-szolgáltató használatát, amelyet a Typekit közösen fejlesztettek ki. A WebFont Loader használatához némi ismerete szükséges a JavaScriptről; ha be szeretné illeszteni ezeket a szolgáltatásokat, akkor olvassa át a WebFont Loader konfigurációinak végrehajtására vonatkozó dokumentációt; hamarosan megvizsgálom a fejlett technikákat egy másik szegmensben. A HTML és CSS fájl letölthető.

© Copyright 2021 | mobilegn.com