Csatlakozó web betűtípusok a @ font-face
Nyomja ki a figyelemre méltó könyv "The Big Book of CSS3 harmadik kiadás" David McFarland web betűtípusok és ahogy csatlakozni az irányelv @ font-face.
Megtanultam erről a témáról egy csomó új dolgot magamnak. Különösen két módon csatlakoztatható betűtípus funkció a Google Fonts szolgáltatást numerikus skála betűtípus sűrűség, a források megtalálása Ingyenes betűtípus, a finomságokat dolgozó generátor FontSquirrel, az erőforrások, a Font ikonra. Információ már rendkívül érdekes és hasznos számomra.
A következő idézet rövid összefoglalót minden kérdést, úgy tűnt nekem, érdekes és új az a tapasztalatom, újra elmondta a saját szavait. Remélem ez az anyag lesz hasznos, nem csak nekem egyedül.
Csatlakozó web betűtípusok a @ font-face:
- Egyéni betűtípusok kapcsolatban az irányelv @ font-face
- Csatlakozás kiosztása font a font-family tulajdonság
Irányelv @ font-face pontot (a név önmagáért beszél - az irányelv!) Böngésző két dolgot kell tennie:
- létre Meghatározza a betűtípus neve
- letöltés glifékhez a betűtípust a megadott helyre, hogy
Font-family tulajdonság jelzi a böngésző, hogy egy font a neve a kiválasztott oldal elemekkel.
Számos formátumot web betűtípusok. A leggyakoribbak: EOT, WOFF, OTF, vagy TTF,
EOT formátumban. akik értik az IE böngésző akár 8-as verzió Tulajdonképpen ez betűformátum jött létre, és amely csak a kedvéért a böngésző és annak változatai. Ahhoz, hogy a EOT betűformátum, meg kell speciális szoftver konvertálni TTF formátumban OET.
Format WOFF (Web Open Font Format) a legjobb a mai napig használható a Web: A legkisebb és legkönnyebb, támogatja minden modern böngésző (beleértve IE9 és magasabb); Ez a formátum jött létre kifejezetten az interneten. Valójában - ez a lite verzió a TTF vagy OTF formátumban.
Formátumok OTF (Open Type Font) és TTF (True Type Font) - ez a leggyakoribb számítógépes betűtípusok, amelyeket a legtöbb operációs rendszer (Windows, Macintosh, Linux) és alkalmazások ezeket a rendszereket. De más, mint, hogy ezek a betűtípusok könnyen használható az interneten.
SVG formátumban - még csak nem is a betűméret és a grafikus formátum grafikus. A különlegessége ennek a formátumnak az, hogy a grafika ebben a formában jön létre, kizárólag olyan vektorok, azaz - matematikai képleteket.
Ezzel kép formátumban skálázható minőségromlás nélkül - méretének növelésével a kép számítógépes újraszámolni a vektor pont elég. A különlegessége ennek a grafikus formátum használhatja azt, hogy egy „font”. Azaz, a normál betűtípussal alakítjuk SVG formátum, amelyben minden font - azt ténylegesen kép méretezhető SVG formátumban.
Miért tartott ilyen nehézségek? A lényeg az, hogy a böngészők Android OS (egy nagyon gyakori operációs rendszer mobil eszközökhöz) képes megjeleníteni web betűtípusok csak ebben a formátumban. Böngészők iPhone (Safari 4.1 és alatt) nem képesek felismerni a web font. Itt ez a „ügyetlen”, és belökte a kép formájában betűtípusok - „nem tud enni a normál étrend, így enni, hogy legalább!”.
Jogi használatának kérdését betűtípusok
A kérdés lehet összefoglalni a következő cformulirovat két mondat. Minden betűtípus vannak osztva fizetett vagy ingyenes.
Fizetett betűtípusok vannak osztva azok, amelyek:
Annak érdekében, hogy ne zavarja a határozat összetéveszti a vitatott engedélyt a betűtípusok, akkor a Google Fonts Typekit vagy webes szolgáltatásokat. amely tartalmazza az összes betűtípus, hogy lehet használni az interneten. Betűtípusok szerverekhez, vagy szabad (Google Fonts), vagy fizetett (Typekit).
Egy rövid lista a szabad font forrásokból. amelyeket fel lehet használni a Web:
Az egyetlen korlátozás az e szolgáltatás - azt saját feketelistára, amely elhelyezte a betűtípusok alapján tilos használati engedélyt az interneten. Más szóval, ha a „csúszás” ez a generátor font licenc megvásárolt kalóz, meg fogja tagadni az utolsó generáció.
Generátor @ font-face generátor - nem csak a webes szolgáltatások ilyen. Vannak mások, mint ő generátorok, amelyek amellett, hogy a „kuszált” tekintetében a konvertált font engedélyt.
Az, hogy a font formátumok az irányelvben @ font-face fontos, és a következő legyen:
- EOT - méret kizárólag Internet Explorer 8 alatt
- WOFF - a legmodernebb és kis méretű betűtípust érthető a legtöbb modern böngésző
- TTF - viszonylag nagy betűméret és meglehetősen elavult
- SVG - a legnagyobb méretét és a betűtípus, ezért kell helyezni az utolsó sort. Ezen túlmenően, a betűtípus formátum csak az Android operációs rendszer vagy a böngésző a Safari 4 (azaz, iPhone)
A helyes alkalmazását a kapcsolódó web-font League Gothic. Megadja az első helyen a betűtípus nevét a kapcsolatot, majd - a back-up betűtípus szándékosan telepített felhasználó rendszer (betűtípus nevét, garantálja a jelenlegi rendszer, és font-family).
A figyelmes olvasó figyelmét a második sorban, és azt mondják, ez túl sok, valami ostobaságot. Valójában nem ez a helyzet. A böngészők mindig próbálják felhívni a főcím félkövér alapértelmezésben. Tehát itt beszélünk a böngésző egyszerűen nem tette meg, ennyi az egész.
Amellett, hogy a betűk, betűk állhatnak ikonokat vagy képeket. A forrásoknak a téma font ikonok és ikonok:
betıtípussal
Amikor a készüléket a betűtípus telepítve van a számítógépre, általában nincs szó, és nem gondolni, hogyan van az, hogy amikor megadja a böngésző teszi a szöveget félkövér a strong tag mi igazán merész; ha erre utasítják keresztül szöveg dőlt tag em dőlt szöveg ténylegesen elvégzett; és félkövér dőlt címkék révén erős em tette félkövér dőlt. Úgy tűnik, hogy a böngésző teszi a szöveget, ahogy mi neki.
Tény, hogy nem. Vagy nem egészen igaz. A böngésző megjeleníti a betűtípus valóban adott neki egy utat, de az nagyon betűket nem tehet semmit. Egyszerűen úgy az adott címke a betűtípus és megjeleníti a képernyőn. Az a tény, hogy a tervezők vagy a vállalat részt vesz a fejlesztési betűtípusok, hozzon létre font az alábbiak szerint: a művész rajzol négy készlet ugyanazt a betűtípust. Ez azt jelenti, a karakterkészlet felhívjuk a normál rajzolatát (rendszeres), majd felhúzza a karakterkészlet kurzív (dőlt), akkor a karakterkészlet a félkövér (bold), és végül egy sor karakter félkövér dőlt (félkövér dőlt). Mindezek a négy készlet szimbólumok valójában egyetlen betűtípus, bár az egyik gyakori név (Georgia, Tahoma, Helvetica, és így tovább).
Amikor a böngésző jelzi a védjegy használata, ez csak úgy egy font a megadott betűtípust, és megjeleníti azt. Például Arial négyfajta felkutatása. Ha megadja, hogy meg kell, hogy merész, amíg a böngésző a merész Arial. Maga a böngésző átalakítani az egyik a másik jel nem semmilyen módon. Azt tehet, csak egy dolog -, és megpróbálja a szokásos jelet a „dőlt”. A csapat, amely azt mondja, a böngésző, hogy végre egy ilyen feladat, az úgynevezett ferde. Ebben az esetben a böngésző csak ostobán végzi dőlése betűtípus karaktereit 45 fok, és minden. A kapott eredmény lehet csak borzasztó, így ez a parancs nagyon ritkán.
Abban az esetben, web betűtípusok aggódj webdesigner kell a csatlakozni mind a négy a jel a kiválasztott betűtípus külön-külön. Mivel a IE8 böngésző kapcsolat Web betűtípusok irányelv @ font-face jóval bonyolultabb, és lehet tenni két módja van: egyszerű. hogy az IE8 nem érti (de érthető minden más böngésző) és összetett. mely elérhető lesz, és IE8 is.
Egy egyszerű módja annak, hogy csatlakozni web font
Egy egyszerű módja, hogy adjunk egy irányelvet a @ font-face CSS-két szabályt: font-weight és font-style. Általában ezek a két szabály határozza meg a böngésző megjeleníteni a szöveget félkövér és dőlt. De belül az irányelv @ font-face, ezeket a szabályokat hordoznak egy másik szerepet, arra kényszerítik a böngészőt, hogy a web font a megadott stílus és a zsír. Hogy világosabb, mi kell egy példát a kapcsolat azonnal PTSans Web font négy változatát is kijelző:
- src: url ( 'PTSansBoldItalic.eot') - a helyét egy font;
- font-weight: normal - a betűtípusok meghatározott zsírtartalom;
- font-style: normal - letölthető a megadott betűtípust.
CSS-szabályok megkövetelik, hogy a négy lehetőség megjelenítésére font töltelék tömb PTSans végre minden egyes alkalommal külön funkció hívás @ font-face. Ezt követően, csak csatlakoztassa a változó PTSans a kiválasztott oldalon:
És akkor HTML-címkék erős vagy em meghatározza, hogy milyen betűtípust kell alkalmazni ezeket az elemeket:
Browser „húzza” a tömb PTSans font védjegy (félkövér vagy dőlt vagy félkövér dőlt), és alkalmazza azt a megadott oldal elemeit.
A módszer előnye az összekötő web font sokoldalúságát. Elég csak egyszer nyilatkozni a betűtípus az irányelv @ font-face szabályt, és:
... akkor, hogy ellenőrizzék a kijelző a szöveg szemantikailag hű címkék erős és em.
Kifinomult utat csatlakozni web font
Sajnos, IE8 nem érti a módját, hogy csatlakozni web font fent leírtak szerint. Pontosabban, ez a böngésző nem érti, hogyan kapcsolják össze a különböző betűtípusokkal, hogy egy és ugyanazon betűtípus nevét. Ha létrehoz egy szabályt, a fent leírt, és megpróbálja letölteni az eredményül kapott HTML-oldal IE8, a teljes szöveg fog megjelenni: font-family: PTSans; font-weight: normal; font-style: normal.
Azokon a helyeken, ahol az alkalmazott címkéket erős vagy em. IE8 böngésző ő teszi a font PTSans a félkövér és dőlt. és ne csatlakoztassa kész betűtípus ezekben rajzolatát. Ennek az az eredménye „kezdeményezés” lesz katasztrofális.
A kiút az, hogy egy másik betűtípusneveket az irányelvben @ font-face. Példa csatlakoztató kiviteli alak web font számára érthető IE8, az alábbiakban mutatjuk be:
Megjegyzés: a szabályok hiánya a font-weight és font-style mind a négy irányelvet @ font-face. Ilyen kódtól még nyilvánvalóbb és logikai, hanem az első kiviteli alakban. És mint minden jó, de kérdezzétek meg most tekintsünk egy egyszerű példa bekezdés címkéjű erős és em. amelyre alkalmazni szeretné a betűtípus PTSans.
Értékeld ezt a CSS - "Crocodile" alább. Mi ez nehézkes és kényelmetlen! És ha figyelembe vesszük, hogy a HTML-oldalon kell alkalmazni font PTSans nemcsak a p elem, hanem a fejlécek h1. h2. csatolhatunk. Ami a „hullámzás” style sheet ebben az esetben! És ha hirtelen (Isten ments!) Meg kell változtatni, hogy ezt a kódot?
Vagy nem kell alkalmazni a második módon kapcsolódni web betűtípusok - ez a kérdés, hogy IE8 támogatásra van szükség egy adott oldalon. Meg kell jegyezni, hogy a részvény IE8 esik, és továbbra is csökken.
Betűtípusok Google-betűtípusok
Annak érdekében, hogy ne zavarja a font kereső, letölti a TTF formátumú vagy az OTF, az átalakítás a generátor típusa FontSquirrel generátor, csatlakoztassa a CSS-eredetű stílusok a projekt segítségével számos irányelv font-face. akkor használja a szolgáltatást a Google Fonts. A módszer előnye abban rejlik, hogy az egyszerűség a módszer és a megbízhatóság -, hogy elég a Google egy sorban linkeket, és tedd be a projektbe.
Az első módszer egyszerű, de van egy hátránya - a link tag kell csatlakoztatni az egyes fejlett HTML-oldalak projekt.
Ugyanakkor, a második módszer segítségével a @import irányelv tömörebb - csak csatlakoztassa az elején a stíluslap válassza ki a betűtípust használni az összes HTML-oldalakat.
A Google betűtípus sűrűséget jelzik a legfontosabb szavakat normális. félkövér vagy merészebb. és egy numerikus skálán - 100 900. Az érték 400 megfelel a normális. 700 - merész.
Például, a kód valahogy így néz ki. Kérd az em elem font Gentium Book Basic normál sűrűségű dőlt:
Ebben présel az interneten font befejezi.