ugrás a tartalomhoz

Tetszőleges betűtípusú szövegek CSS-sel

Török Gábor · 2009. Jún. 29. (H), 17.05
A nemsokára megjelenő Firefox 3.5-ös kiadás számos újdonságot kínál a webfejlesztőknek. Ezek közül az alábbiakban a @font-face CSS szabály megvalósításáról szólok, amely segítségével a látogató számítógépére telepített betűtípusoktól függetlenül, tetszőleges fonttal jeleníthetjük meg weblapunk szövegeit. Jelentős igény mutatkozik a webbiztos betűtípusok-tól eltérő fontok használatára, a Weblabor hasábjain is már több ízben előkerült a téma.

A @font-face szabály a CSS2 ajánlásban jelent meg először, majd a 2.1-ből kivették, hogy végül a CSS3 Fonts Module részeként bukkanjon fel újra. A böngészők közül eleddig az Internet Explorer (4-es óta), valamint a Safari (3.1-től) és Chrome (2-es széria) támogatta a szabályt. (Az Opera a 10-estől fogja). Igaz, míg utóbbi csapathoz csatlakozó Firefox is elérhetővé teszi OpenType és TrueType betűkészletek betöltését, az IE addig csak ún. Embedded OpenType fontokat tud betölteni (a többiek meg azt nem).

Stílusosan a Firefox 3.5-ös verziójának telepítését követően a böngésző üdvözlő felületén találkozhatunk a @font-face-szel működés közben.

@font-face támogatás Firefox 3.5-ben



Lássuk, miként használhatjuk ezt a szabályt.

@font-face {
    font-family: "Laffayette Comic Pro";
    src: url("/img/fonts/Laffayette_Comic_Pro.ttf");
}

p {
    font-family: "Laffayette Comic Pro", sans-serif;
}
A @font-face-en belül ún. font deszkriptorokat adhatunk meg. Egy stíluslapon több szabály is használható, egy @font-face blokk egy új betűtípus allokációjóért felelős. A fenti példát az említett mozillás felületről kölcsönöztem. Laffayette Comic Pro néven bevezetünk egy új betűtípust, amelyet az /img/fonts/Laffayette_Comic_Pro.ttf helyről töltünk be. Noha a szabványban nem találtam ide vonatkozó passzust, illetve a példakódban is abszolút címzésű URI-t használnak, addig a firefoxos implementáció csak ugyanarról a doménról enged betűtípust betölteni, így hiába próbálkozunk a weboldalunkon az alábbi snipettel, nem lesz hatása.

@font-face {
    font-family: "Laffayette Comic Pro";
    src: url("http://hu.www.mozilla.com/img/fonts/Laffayette_Comic_Pro.ttf");
}
In Gecko, web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless HTTP access controls are used to relax this restriction.


Az a böngésző gyártóra van bízva, hogy miképp oldja meg a fontok gyorstárazását, mindenesetre az ajánlás lehetővé teszi a src tulajdonságnál további erőforrások megadását is, amelyek hivatkozhatnak helyi resource-ra is.

@font-face {
    font-family: "Laffayette Comic Pro";
    src: local("Laffayette_Comic_Pro.ttf"),
         url("/img/fonts/Laffayette_Comic_Pro.ttf");
}
A firefoxos megvalósítás még egy ismérve, hogy amíg a külső betűtípus nem töltődik le, addig a CSS szabályok szerinti következő betűtípussal rendereli a szöveget.

Akkor tehát semmi sem gátolja meg a webet, hogy elárasszák a csudálatos betűtípusú feliratok? Két dolog azért némiképp. Egyfelől a felvezetőben említett IE nem támogatja a többi böngésző által ismert formátumokat, csak az Embedded OpenType-ot. Ehhez szerencsére kínál eszközt a gyártó WEFT néven, így ez a probléma egy ügyes fogással áthidalható.

@font-face { /* Webkit, Gecko */
    font-family: "Laffayette Comic Pro";
    src: local("Laffayette_Comic_Pro.ttf"),
         url("/img/fonts/Laffayette_Comic_Pro.ttf");
}

@font-face { /* IE */
    font-family: "Laffayette Comic Pro IE";
    src: local("Laffayette_Comic_Pro.eot"),
         url("/img/fonts/Laffayette_Comic_Pro.eot");
}

p {
    font-family: "Laffayette Comic Pro", "Laffayette Comic Pro IE", sans-serif;
}
A másik problémát pedig a betűkészletek beszerzésének és terjesztésének jogviszonya vetheti fel. Természetesen csak legálisan birtokolt vagy (megbízható forrásból) ingyenesen elérhető betűkészletekkel turbózhatjuk meg az ügyfél designját – ezt érdemes a grafikusok felé is tolmácsolni, azzal együtt, hogy hamarosan szabadabb kezet kapnak.
 ■
1

jogviszony

gex · 2009. Jún. 29. (H), 17.32
aki eddig is lopta a betűit az ezután is fogja, ezen a felhasználás módja nem fog semmit sem változtatni. eddig a psd-ben volt, most meg átküldik a fejlesztőnek hogy ilyen fejléc kell.
2

Ebben igazad van, de ehhez

Török Gábor · 2009. Jún. 30. (K), 10.38
Ebben igazad van, de ehhez akkor a nem webbiztos betűtípussal készített design részeket képként (vagy sIFR-rel vagy mással) lehetett csak beszabni, nem mezei szövegként. Ezzel a módszerrel pedig külön hátulütő nélkül lehet halomra behívni a különféle betűtípusokat.
3

Cserébe megint több kérés lesz

Adam · 2009. Jún. 30. (K), 11.19
Az lenne a jó, ha ezek a font-ok nem külső file-ból való betöltése, hanem data-ként megadva is lehetne beágyazni – lehet, hogy már most is lehet, nem tudom. Különben megint plusz 1, 2, 3 lekérés megy a szerver felé…
6

Plusz kérés

vbence · 2009. Jún. 30. (K), 11.40
Keepalive mellett nem hiszem hogy akkora gond lenne a plusz kérés. Egy PHP-ban lévő include sem éppen erőforráskímélő.
8

a keep-alive az arra nyujt

mrbond · 2009. Jún. 30. (K), 14.06
a keep-alive az arra nyujt megoldast, hogy nem kell uj kapcsolatot kiepiteni,
de ettol meg az egy iranyba kozlekedo parhuzamos requestek szama adott.

es ez igen is szuk keresztmetszet, es szerintem igen is gond a plusz lekerdezes.

nem veletlen, hogy gzipelt, minified, kombinalt js-eket szolgalunk ki
es ugyanez igaz a css-re is. es a spriteokra is.
az mind emiatt van.
9

Ésszerű használata mellett

Török Gábor · 2009. Jún. 30. (K), 14.15
Ésszerű használata mellett lehet, hogy ugyanannyi lekérdezés, ha teszem azt egy grafikai elemet most egy font vált fel.
4

értem én

gex · 2009. Jún. 30. (K), 11.28
értem a két technika közötti különbséget, csak arra próbáltam rávilágítani hogy ez nem lesz gátja a font-face terjedésének, hiszen a betűtípust képként felhasználva is ki kell fizetnünk. és akit ez eddig nem zavart, azt ezután sem fogja. ahol pedig törődnek azzal hogy legálisan beszerzett betűket/stock fotókat használjanak, ott lesz keret az oldal nagy részét kitevő szöveghez is betűtípust vásárolni.

az igazi veszély a "pistikék" által készített weboldalak - napi 3 látogatóval bíró comic sans-ot használó oldalak :) -, ott a kérdés az lesz hogy a fejlesztő vagy a vevő büntethető majd a betű jogtalan használatáért.
5

Sáv

vbence · 2009. Jún. 30. (K), 11.36
A mai web nagyrésze kitűen működik "sans-serif" alapon. Nekem nem hiányzott, hogy minden oldal mindenféle kúl betütípussal próbáljon brandet építeni, az olvashatóság és sávszél róvására :-/

Ahol ez elfogadható ott amúgy is flasht használnak, amit sosem fog utólérni a HTML-alapú technológia.

Cache-elséi stratégia ügyesebben is kitalálható lett volna. A same-domain policy pedig egyszerűen butaság, a valódi problémák megoldásának elodázása. Nem hiszem, hogy bármilyen szerzői jogi vagy jószomszédsági kérdést felvet, amit képek beágyazása más domainről ne vetne fel.
7

szerintem nem rossza a same

mrbond · 2009. Jún. 30. (K), 14.02
szerintem nem rossza a same domain policy.

terhelje csak a sajat szerveret es ne az enyemet a font behuzasaval.
11

És mi van a képekkel?

vbence · 2009. Jún. 30. (K), 14.55
Gonoldodm a bandwidth-stealing ellen van egy Rewrite szabályod, ami megakadályozza bizonyos fájltipusok (tipikusan képek) embedelését más oldalkra. (Sőt, lehet fordított logikával is dolgozni: csak a felsorolt néhány fájltips lesz elérhető kivülről). Mibe kerül ehhez hozzáírni a ttf fájlokat? - Vagy a képeidet nyugodtan vigyék, csak a fontjaidat nem?

Ugyanakkor lehetőséged lenne engedélyezni is, hogy mások a fontjaidat linkejék, mondjuk a saját termékeid promótálására, vagy értékes statisztikai információk begyűjtésére.
10

Így tudott működni tömegesen

Török Gábor · 2009. Jún. 30. (K), 14.18
A mai web nagyrésze kitűen működik "sans-serif" alapon.

Ez így van, mert így tudott működni tömegesen. Hosszabb olvasáskor viszont ez (legalábbis nálam) jelentkezik is. Rettentően fárasztja a szemet például a Google Readerben a tucatnyi egyen fontú hasáb olvasása, sokszor csak azért megyek át a gazda oldalra, hogy más tipográfiában lássam a szöveget.
12

Ment már eddig is...

Gixx · 2009. Jún. 30. (K), 15.16
Direkt egy ronda fontot választottam, hogy ne legyen félreértés: http://www.gixx-web.eu/terv/3/index.html

A következőkkel néztem:
IE6 -> nem tudtam működésre bírni
IE7 -> megy
IE8 -> megy
Firefox 3.0.11 -> megy
Opera 9.64 -> megy
Chrome 2.0.172.33 -> megy
Safari 4.0 (530.17) -> megy, de alapból vastagabban jeleníti meg
13

3.0.11-gyel nem megy nálam

Török Gábor · 2009. Jún. 30. (K), 15.24
3.0.11-gyel nem megy nálam (Mozilla/5.0 (X11; U; Linux i686; hu-HU; rv:1.9.0.11) Gecko/2009061118 Fedora/3.0.11-1.fc10 Firefox/3.0.11). A Firefox 3.5 üdvözlő felület is a külső betűtípussal jelenik meg nálad 3.0.11 alatt?
15

akkor lehet, hogy...

Gixx · 2009. Jún. 30. (K), 15.32
...a 3.5 előtti Firefox platform függő ebből a szempontból?

Na ezt viszont nem vizsgáltam.
14

Chrome 2.0.172.33

yaanno · 2009. Jún. 30. (K), 15.29
Fail. Remélem, úgy próbáltad, hogy nincs eleve a gépeden az adott font :)
16

Egyéb böngészők

yaanno · 2009. Jún. 30. (K), 15.37
Nálam (WinXP) a felsoroltak közül egyikkel sem ment (Safari 4-et nem próbáltam); 3.2.1-es Safari vitte egyedül.
17

benyomom a szégyen gombot

Gixx · 2009. Jún. 30. (K), 16.25
Mennyi az esélye, hogy egy olyan fontot sikerült szednem a netről, ami a másik két tesztalany gépén az Office révén alapból felkerült? :D

Szerkesztve:

beraktam egy olyan fontot, ami biztos, hogy nincs installálva (se nálam, se a haverok gépén) és a Weft is engedte embedelni.

IE6 belépett a játékba, viszont az FF, Chrome és Opera általam használt verziói valóban kiestek.
18

FF+ IE Tab

eashlon · 2009. Júl. 1. (Sze), 01.01
Érdekes, hogy a nálam (3.0.11) FF re telepített IE Tab (1.5.20090207) verzióval szépen működik a font-face. Egészen addig, amíg rá nem frissítek, mert akkor FF egy darabig teker, aztán összeomlik. De gonosz vagyok, és nem küldök hibajelentést az m$-nek :D
19

License broken

Gixx · 2009. Júl. 22. (Sze), 15.57
Míg bár a Microsoft Weft egy elég instabil program, de legalább nem konvertál olyan fontot, amit a licensz köt, addig joggal bízhattunk linuxos barátaink ügyességében, hogy a törvényesség útját messzire elkerülve megcsinálják a saját kis konverterüket.

És tényleg, íme: http://code.google.com/p/ttf2eot/