CSS Base64-eko letra pertsonalizatuekin

Hobetu zure webgunearen aurkezpena letra-tipo pertsonalizatuak erabiliz kanpoko fitxategirik igo gabe (.ttf, .EOT, . woff, .svg).

Aurkezpen

Badakigu zuzena erabiliz edozein letra tipo kargatzea posible dela @ font-face CSS egin. Bi eratara egin dezakegu:

1. Fitxategiekin – Letra tipo fitxategiak CSS erantsiz;
2. Base64-rekin – Iturburu kodeketa CSS zuzenean txertatzea.

Bi modalitateetan ohikoa den lehen urratsa zure lehentasunen iturria aukeratzea da. Dagoeneko nahiago duzun iturburuaren fitxategia baduzu, gero, urrats hau salta.

Hainbat webgune daude Fonts-etik fitxategiak aukeratu eta deskargatzeko, haien artean:

Letra tipo Urtxintxa
Google Fonts
DA Font
1001 Doako letra tipoak
Net Letra-tipoak
F Letra tipoak

Zenbait iturri jabedunak izan daitezke (ordainduta). Aukeratu letra-tipoa eta deskargatu ordenagailura. Goazen Solutions-era!

KONPONBIDEA 1 – fitxategiekin

Hau da ohiko bidea. Kasu honetan, formatu mota desberdinak izan behar ditugu, esaterako .ttf, .EOT, . woff, .svg, arakatzaile desberdinetara egokitzeko, letra-tipoa errendatzeko formatu zehatz bat behar baita, begiratu:

Onartutako arakatzaileak eta letra-tipo formatuak:
– Internet Explorer: USTELA (e IE9 WOFF);
– Mozilla: OTF, TTF (e FF3.6 + WOFF);
– Safari eta Opera: OTF, TTF, SVG (e Safari 5.1 +, Opera11.10 + WOFF);
– Chrome: TTF, SVG (e Chrome6.0 + WOFF);
– Mugikorreko arakatzaileak: SVG.

Hurrengo adibidean, kontuan izan CSS eraikitzeko beharrezkoa izango litzatekeela iturburu fitxategia 'okudaregular’ lehenago formatu guztietara bihurtuta, horrek prozesua neketsuagoa bihurtuko luke.

CSS letra-tipo formatu desberdinak kargatzen

1
2
3
4
5
6
7
8
9
10
11
 
@letra--aurpegia {
    letra--familia: 'okudaregular';
    src: url('okuda-webfont.eot');
    src: url('okuda-webfont.eot?#iefix ') formatua('embedded-opentype'),
         url('okuda-webfont.woff') formatua('woff'),
         url('okuda-webfont.ttf') formatua('truetype'),
         url('okuda-webfont.svg # okudaregular') formatua('svg');
    letra--pisua: normala;
    letra--style: normala;
}

Formatu horiek guztiak biltzea agian ez da zeregin hutsala. Gune batzuek horretan laguntzen dute, lineako bihurgailuekin barne.

Adibide bat nahi? Demagun Okuda letra tipoa nahi duzula eta Letra tipo fitxategia duzula dagoeneko “Okuda.ttf”. Saiatu hau: sartu WebFont Generator. Kargatu fitxategia eta, sekuentzian, deskargatu KIT hori, Kasu honetan, fitxategi konprimitua da “webfontkit-20130416-104252.zip”.

Kontuan izan Kit barruan (.zip) hainbat fitxategi ditugu, baina interesatuko zaiguna .eot bezalako letra-tipo formatuen fitxategiak dira, .svg, .ttf, .woff eta edukia “estilo orria.css”, zein den zehazki kodea “@ font-face” goian erakutsi nuena.

Egin behar duzun guztia letra tipoak zure aplikazioaren ondoan kokatu eta bidea doitzea da (bidea) url barrukoa(<pathToFont>), Beharrezkoa bada.

konponbidea 2 – Base64-rekin

Hau izan zen ondoen zerbitzatu ninduen modua, guztiz bateragarria arakatzaile nagusi guztiekin eta kanpoko fitxategi ugari kargatu beharrik gabe. Irtenbide horretan, Fontek egingo du “bidalita” ez dago CSS koderik. Dagoeneko zure letra gogokoena aukeratu ondoren, beste bi urrats besterik ez ditu ematen:

1. Bihurtu Base64ra;
2. Sartu kodea CSSn.

Bihurtu Base64ra

Base64 erabiltzen duen datu / MIME enkriptatze metodoa da 64 pertsonaiak ([A-Za-z0-9], “/” e “+”) Interneten edukia transferitzeagatik.

Egin behar duguna da Iturburu fitxategia Base64 bihurtzea eta CSS zuzenean txertatzea. Sar zaitez beheko webgunera, igo zure Iturria eta egin klik “Kodetu” bihurketa egiteko. CSS kodea lortzeko Source64-en dagoeneko Iturriarekin, Klik “CSS fitxategia”.

http://base64fonts.com/

Sartu kodea CSSn

azkenik, besterik gabe, kopiatu Base64-en sortutako kodea eta itsatsi zure CSS fitxategian, horrelako zerbait:

1
2
3
4
@letra--aurpegia{
 letra--familia: "Playball";
 src: url(datuak:letra-/woff;oinarria64,d09GRgABAAAAAE5cAA...AEjQA=) formatua('woff');
}

Hemendik aurrera Iturria erabili besterik ez duzu “Playball” zure .css fitxategian, estiloaren edo lerro etiketa barruan (ez da gomendagarria), beraz,:

1
2
3
  <div estiloa="font-family: Playball;">
    Nire testua letra pertsonalizatuarekin.
  </div>

Arazoak

Irtenbiderako 1 e 2, dagozkien arazoak gerta daitezke:

Teknikarekin arazoak “erantsitako fitxategiak”
Iturburuak zure aplikazioa baino domeinu desberdinetan badaude, Internet Explorer-ek eta Firefox-ek ez dute letra-tipoa errendatuko, segurtasun arrazoiengatik. Hau konpontzeko, du Letra tipo Urtxintxa .htaccess fitxategiaren bidez baimentzea proposatzen du, antzeko zerbait:

1
2
3
4
5
<FilesMatch "\.(ttf|otf|woff)$">
<IfModule mod_headers.c>
        Goiburua ezarri Sarbidea-Kontrola-Onartu-Jatorria "*"
</Modulua bada>
</FilesMatch>

Teknikarekin arazoak “Oinarria64”
Badirudi, badirudi Internet Explorer muga dagoela Fonts-etik fitxategi batzuk kargatzerakoan. Ez dakit handiegia den edo akats ezezagunen bat den. hortaz, zure letra-tipoa errendatzen ez bada, saiatu antzeko bat erabiltzen. Edo probatu bi irtenbideak (fitxategiekin eta Base64-rekin) eta ikusi zein den bateragarriena zure Iturriarekin eta arakatzaileekin.

Emaitza ondorengo arakatzaileetan probatu nuen:
– Google Chrome bertsioa 26.0.1410.64
– Firefox 19.0.2
– Internet Explorer 10.0.9200.16521

iturri

Letra tipoen tutorialak – Web letra tipoei buruz
Wikipedia – Oinarria64

denera: 22418

Iruzkin bat “CSS Base64-eko letra pertsonalizatuekin

Erantzun

Zure e-posta helbidea ez da argitaratuko.