Tardis, potresti darmi qualche info sulla differenza tra l'estensione e il selettore @font-face?
Insomma, perchè usare un'estensione quando bastano due stringhe di codice.
A meno che la differenza sia in altri termini...
Sarei interessata a capire il perchè della tua scelta.
Saluti
Sicuramente quello che si ottiene utilizzando l'estensione lo si può realizzare anche con con javascript e css.
Personalmente preferisco scivermi del codice al volo piuttosto dell'utilizzare moduli aggiuntivi se il costo in tempo e risultati è lo stesso e non si tratta di codice che possa essere interessante rilasciare ad altri.
In questo caso i vantaggi nell'utilizzare un'estensione sono fondamentalmente due: il primo ovviamente è la condivisibilità del codice con altri e il secondo il costo in tempo infinitesimo rispetto alla scittura di codice ad hoc.
Scusami per la prolissità di quanto segue ma voglio cercare di spiegarmi meglio :-)
Scrivendo del proprio codice si devono considerare per primo il problema rappresentato da IE che non solo utilizza solo font di tipo eot, che non vengono utilizzati dai browser standard, ma ha anche una propria sintassi diversa dalla standard percui, scritto del codice javascript che identifichi il browser, si devono inserire delle doppie dichiarazioni per gestire il tag @font-face, ad esempio:
<!--[if IE]>
<style type="text/css">
@font-face {
font-family: "Domestic Manners";
font-style: normal;
font-weight: normal;
font-stretch: normal;
src: url("/demo/components/com_phocafont/fonts/Domestic_Manners.eot") ;
}
body { font-family: "Domestic Manners", serif, arial, helvetica;
}
</style><![endif]-->
<!--[if !IE]>-->
<style type="text/css">
@font-face {
font-family: "Domestic Manners";
font-style: normal;
font-weight: normal;
font-stretch: normal;
src: url("/demo/components/com_phocafont/fonts/Domestic_Manners.ttf") format("truetype");
}
body { font-family: "Domestic Manners", serif, arial, helvetica;
}
</style><!--<![endif]-->
Se quello che interessa realizzare è minimale, ad esempio modificare il font di default di un sito in maniera definitiva, è più che sufficente uplodare sul sito i files dei fonts che si vogliono utilizare ed inserire un blocco di codice 'doppio' come questo e, in questo caso, l'utilizzo di un'estensione può essere sovradimensionato.
In questo caso, test javascript sul tipo di browser a parte, sono una ventina di righe di codice.
Purtroppo se si comincia a volere sfruttare le caratteristiche offerte da questo nuovo standard il codice aumenta ed anche molto.
Utilizare un font in maniera completa vuol dire considerare che un font può avere 8 combinazioni di stili. Per ogni font "completo", meno imprecisamente per ogni famiglia di fonts, bisogna inserire un tag @font-face per ogni combinazione di stile quindi si ha bisogno di un blocco di codice, da 'raddoppiare' come indicato sopra per gestire anche IE, simile a questo:
<style type="text/css">
@font-face {
font-family: Dejavu Sans;
font-style: normal;
font-weight: normal;
font-stretch: normal;
src: url("fonts/DejaVuSans.ttf") format("truetype");
}@font-face {
font-family: Dejavu Sans;
font-style: normal;
font-weight: bold;
font-stretch: normal;
src: url("fonts/DejaVuSans-Bold.ttf") format("truetype");
}@font-face {
font-family: Dejavu Sans;
font-style: italic;
font-weight: normal;
font-stretch: normal;
src: url("fonts/DejaVuSans-Oblique.ttf") format("truetype");
}@font-face {
font-family: Dejavu Sans;
font-style: italic;
font-weight: bold;
font-stretch: normal;
src: url("fonts/DejaVuSans-Oblique.ttf") format("truetype");
}@font-face {
font-family: Dejavu Sans;
font-style: normal;
font-weight: normal;
font-stretch: condensed;
src: url("fonts/DejaVuSansCondensed.ttf") format("truetype");
}@font-face {
font-family: Dejavu Sans;
font-style: normal;
font-weight: bold;
font-stretch: condensed;
src: url("fonts/DejaVuSansCondensed-Bold.ttf") format("truetype");
}@font-face {
font-family: Dejavu Sans;
font-style: italic;
font-weight: normal;
font-stretch: condensed;
src: url("fonts/DejaVuSansCondensed-Oblique.ttf") format("truetype");
}@font-face {
font-family: Dejavu Sans;
font-style: italic;
font-weight: bold;
font-stretch: condensed;
src: url("fonts/DejaVuSansCondensed-BoldOblique.ttf") format("truetype");
}
body { font-family: "Domestic Manners", serif, arial, helvetica; }
</style>
Un solo font corrisponde a circa 100 righe di codice, più il check javascript, e 16 files (8 eot per IE e 8 ttf, o opentype, per i browser standard).
A questo punto rapidità ed efficenza derivanti dall'utilizzo di un'estensione che generi automaticamente il codice rispetto ad una gestione manuale credo siano evidenti particolarmente se si opera su più siti e/o con più font per sito magari frequentemente.
Dal punto di vista del codice ovviamente nulla impedisce di scriversi comunque dei propri css e poi gestire questi manualmente ma il vero punto di forza nell'utilizzo di un estensione. oltre alla generazione del codice ed i vantaggi che comporta non ultimo il non dovere perdere tempo ad ogni modifica/aggiunta per eseguire un check/test del corretto funzionamento di quanto fatto manualmente, è la gestione 'automatizzata' dei files dei font.
Una gestione 'manuale' un minimo flessibile/gestibile implica la realizzazione di qualcosa tipo:
- una funzione javascript per il riconoscimento del browser
- un css con tutti i @font-face per tutti i font utilizzati o in alternativa un gruppo di css, uno per ogni famiglia di fonts utilizzabile
- un css con le assegnazioni dei font a tag e class html/css
- includere tutti questi files in ogni pagina che li debba utilizzare
- gestire e allineare in ftp 16 files per famiglia di fonts
- modificare a mano più files per ogni operazione di modifica e/o aggiunta
Personalmente ho optato per l'estensione per questi motivi:
- dovevo utilizzare su più siti joomla diversi fonts
- su alcuni di questi siti dovevo permettere ad altri, con capacità per agire un minimo sul backend di joomla ma non di agire sul codice, di modifcare 'al volo' i fonts
Come scrivevo mi sono testato tutte le estensioni che ho trovato che gestissero i @font-face, o meglio promettessero di farlo, e l'unica estensione che ho trovato che funzionasse, e lo facesse veramente su tutti i browser, è Phocafont.
Gli unici inconvenienti che aveva erano il non gestire più di una famiglia di fonts, solo tre fonts pronti e un formato per i pacchetti di fonts da utilizzare praticamente non documentato.
Mi sono scritto le modifiche per l'estensione per gestire più famiglie di fonts, le ho postate sul loro forum e loro le hanno aggiunte alla versione attualmente online per il download dal loro sito.
Per quello che riguarda i fonts nelle aggiunte che ho fatto alla guida di conti ho indicato come realizzare nuovi pack di fonts da utlizzare con l'estensione (sostanzialmente sono zip con i file dei fonts e un xml per l'installazione).
L'estensione ha un ulteriore vantaggio, derivante dalla generazione del codice, che personalmente non posso non apprezzare considerando che mi picchio con il crossbrowsing fin dai tempi di IE4/NS4 ossia il tutelarmi da ulteriori gestioni 'non standard' di IE.
Ipotizziamo che domani esca un IE 9 con una sintassi alterata, ad esempio decidono di cambiare @font-face con @@@font-face-solo-ms.
Con un'estensione si modifica il codice dell'estensione perchè gestisca anche questo caso, diciamo che gli si fa generare codice non più doppio, IE/non IE, ma triplo, IE9/altri IE/non IE, e poi serve solo un upgrade dell'estensione su ogni sito su cui si utilizza, che può essere fatto anche da utenti non programmatori, e si è finito e immediatamente online.
Con una gestione 'manuale' si deve modificare e ritestare tutto, file per file e sito per sito, e sono operazioni che devono essere fatte da un programmatore.
Personalmente trovo questo sia un caso in cui l'utilizzo di un'estensione sia preferibile, per i motivi che ho elencato.
Saluti, Tardis
