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
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
