CSS 3.0 e caratteri

Prendendo spunto da un bel articolo di John Resig – un uomo un genio – pubblicato su ArsTechnica, ho preparato una piccola paginetta di test

Questo il risultato con Firefox 3.0.3:

Mozilla/5.0 (Windows; U; Windows NT 5.1; it; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Pagina di test come appare in Firefox 3.0.3

Questo il risultato con Firefox 3.1:

Mozilla/5.0 (Windows; U; Windows NT 5.1; it; rv:1.9.1b1) Gecko/20081007 Firefox/3.1b1

Immagine di come appare la pagina di test con Firefox 3.1 (beta)

Tutti i browser di nuova generazione infatti saranno in grado di riprodurre anche font non installati nel proprio sistema operativo, a patto che essi vengano correttamente dichiarati nel foglio di stile. Per indicare ad un browser il tipo di carattere utilizzato sarà sufficiente inserire nel foglio di stile:

@font-face {
  font-family: "Arabella";
  src: url(Arabella.ttf) format("truetype");
}

(sostituendo ad Arabella il nome del carattere che si vuole definire)

Ciò fatto, sarà possibile utilizzare il font nelle nostre pagine:

font-family: Arabella, serif;

In questo modo il browser utilizzerà la risorsa specificata, nel caso in cui il font non sia installato sulla propria macchina. Senza dubbio una grande notizia per tutti i Web designer che non si dovranno preoccupare che il font sia o meno installato sul computer del visitatore, in quanto, il font potrà essere reperibile online per la corretta visualizzazione della pagina, che apparirà così come il web designer l’ha pensata.

Problema ? Le licenze di utilizzo dei caratteri , purtroppo sono davvero restrittive 🙁 . Al sottoscritto, ad esempio, piacerebbe moltissimo usare il Calibri: è molto leggibile, risulta molto adatto per una pagina Web, ha una buoissima resa con l’anti aliasing (Clear Type), però se lo facessi andrei contro la licenza del carattere che è uno dei nuovi font di Windows Vista. Non che sia difficile reperire i font inclusi in Vista: è sufficiente scaricarsi il viewer per i documenti di Office (freeware), scompattare il file e cercarsi i caratteri, ciò nonostante sarebbe “illegale” renderli disponibili in un foglio di stile 😛 .

Fortunatamente c’è anche chi, come Dieter Steffmann, rende disponibili gratuitamente dei caratteri molto ben fatti. Per la pagina di test ho usato uno di questi caratteri, Arabella, che nessun web designer sano di mente si sognerebbe mai di utilizzare in una pagina visto che è praticamente illegibile, ma per una pagina di test rende benissimo le differenze con un font senza grazie (di grazie ne ha pure troppe).

Chi vuole può usare il foglio di stile creato da John Resig (che io ho utilizzato per la pagina di test) che definisce tutti i font creati da Dieter Steffmann, ovviamente sarà necessario importarlo nel foglio di stile utilizzato e includere nella stessa cartella i file ttf dei vari caratteri.

Link:

Technorati Tags: , , ,

16 Responses to “CSS 3.0 e caratteri”


  • Opera 9.61 Windows XP

    Davvero interessante… dandone per scontato il supporto anche in Opera con la prossima major release, mi pare resti solo IE fuori… anche se dovrei controllare che la versione 8 non mi stupisca 😀

    Resta cmq quella quota ancora spropositata di IE6 users … un bell’ostacolo che probabilmente costringerà ad altri workaround ancora per un bel po’ di tempo

  • Mozilla Firefox 3.0.3 Windows XP

    Se leggi l’articolo di John Resig sembra che – sorprendentemente – IE8 sia al passo coi tempi 😛
    È una dei requisiti per passare l’Acid3 (uno di quelli che ha senso supportare) quindi credo che tutti i nuovi browser che usciranno nel 2009 avranno questa capacità.
    Ciao
    Ah, ho visto che sei tornato a bloggare anche te 😀

  • Mozilla Firefox 3.0.3 Windows XP

    Per gli IE6: verissimo, però si può sempre usare un free font come prioritario e indicare i soliti noti come secondari, praticamente come si fa ora.
    Ciao

  • Opera 9.61 Windows XP

    Sempre più interessante allora … mi sa che al prossimo giro di sviluppo comincerò a giochicchiarci 😀

    Ah, ho visto che sei tornato a bloggare anche te

    Uhmm… si beh diciamo che ultimamente ho ricominciato un po’ troppe cose (crisi esistenziali? 😀 )… vedremo quanto dura…

  • Mozilla Firefox 3.1b1 Windows XP

    Molto interessante 🙂 …
    Sto provando Firefox 3.1b1 e funziona molto bene=D
    Resta poi da vedere quanto sarà effettivamente tenuto in conto dagli svilupattori dei siti,insieme al supporto al tag video OGG che meriterebbe senza dubbio una certa diffusione…
    Speriamo anche che vengano supportati presto in Opera, visto che è l’unico browser che posso usare sul PC di mio papà…
    Geolocation invece mi lascia un po’ perplesso…

  • Mozilla Firefox 3.0.3 Windows XP

    Uhm, credo che gli sviluppatori dei siti web saranno felicissimi di avere questa possibilità in più, anche perchè è abbastanza semplice da implementare.
    Secondo me, Goggle, Mozilla, Apple potrebbero anche sponsorizzare la creazione di qualche bel font multi piattaforma che sia di buona leggibilità sulle pagine Web, vedremo 🙂

    Per l’audio (/video): io ho provato a fare una pagina dimostrativa, però a me non funziona, di sicuro ho sbagliato qualcos….
    Comunque quello mi sa che sarà più difficile da diffondere, Apple è legatissima ai suoi formati e così anche Microsoft per spingere verso un formato aperto 🙁 .

    Opera è sempre arrivato per primo a superare gli Acid test, quindi non credo ci sia da preoccuparsi.
    Ciao

  • Opera 9.62 Windows Vista

    Francamente non credo che i webdesigner tarderanno troppo ad usarlo… semplicemente perchè lo si aspettava da anni e visto che lo supportano tutti i browser non dovrebbero esserci problemi

    Per i tag invece la penso diversamente… quando oggi creare un player personalizzato in flash è alla portata di tutti (senza contare quelli già pronti) credo che saranno in molti a preferirlo per via del maggiore controllo… almeno credo

  • Opera 9.62 Windows Vista

    Francamente non credo che i webdesigner tarderanno troppo ad usarlo… semplicemente perchè lo si aspettava da anni e visto che lo supportano tutti i browser non dovrebbero esserci problemi

    Per i tag invece la penso diversamente… quando oggi creare un player personalizzato in flash è alla portata di tutti (senza contare quelli già pronti) credo che saranno in molti a preferirlo per via del maggiore controllo… almeno credo

  • Mozilla Firefox 3.1b1 Windows XP

    Ciao 🙂
    Per provare il supporto ad OGG ho utilizzato questa pagina e a me funziona bene 🙂 … http://tinyvid.tv/
    C’è ancora qualche piccolo miglioramente da fare, secondo me… Ad esempio, servirebbe una barra come quella di youtube per capire:
    1) quanto dura il video e quanto è stato visto, sia in percentuale che in minuti
    2) quanto del video è già in cache e si può vedere senza scatti
    Tu hai una pagina di test per geolocation? Voglio sperimentare per vedere quanto è effettivamente preciso… Mi sembra impossibile che si possa identificare così bene la posizione di un PC…
    Per Opera è sempre stato così 🙂 … speriamo che continuino su questa strada, senza però aumentare i requisiti di sistema =D

    Noto adesso che il pulsante per il volume serve solo per attivare o disattivare il suono, ma non per regolarlo… Speriamo che vengano aggiunte presto queste modifiche…

  • Mozilla Firefox 3.0.3 Windows XP

    @Sleeping,
    grazie per il link.
    Una pagina di test non ce l’ho, però magari posso provare a cercartela, sinceramente neanche a me interessa molto 😛
    Quoto Engelium per quanto riguarda il tag video.
    Ciao

  • Mozilla Firefox 3.0.3 Windows XP

    Perfetto,
    ora funziona anche a me 🙂
    Ho visto ne hanno anche approfittato per uploadare dei pornazzi 😛 , pure sulle pagine di test li mettono !
    Ciao

  • Mozilla Firefox 3.1b1 Windows XP

    Ho trovato questa pagina per testare geolocation http://browserspy.dk/geolocation.php … A me sembra non funzionare, ma forse dipende dal fatto che sto usando la versione portatile e questo viene gestito da un’estensione che forse non riesce a salvare i dati nel profilo…boh…praticamente io inserisco la mia posizione, ma quando ritorno è come se non l’avessi mai messa… Proverò in una macchina virtuale 🙂 … O forse avrà ancora qualche problema di funzionamento… Comunque la posizione che darai sei tu stesso a determinarla, quindi puoi dare semplicemente la posizione della tua città e non vedo nessun problema di privacy 🙂

  • Mozilla Firefox 3.0.3 Windows XP

    Interessante, ora resta solo poter mettere i bordi arrotondati, un pò per tutti… (anche se FF e safari hanno un loro codice non ufficiale che lo permette ma non ti fa passare il validatore) e poi per ora per quei pochi siti che ogni tanto creo sto bene 😀

    ps
    ciao ragazzi 😉

  • Mozilla Firefox 3.0.3 Windows XP

    Ciao Pasquale,
    fa piacere rivederti.
    Gli angoli arrotondati li uso anch’io 😛 , comunque non è una gran perdita non vederli.
    Federico,
    l’ho installata anch’io or ora e neanche a me funziona, boh !
    Credo comunque venga passato nell’user agent la posizione inserita (Geo Location) o calcolata (Geode), in ogni caso, secondo me, a me non servirà a nulla 😛 , magari poi mi arriva la pubblicità dei ristoranti di treviso invece di vedere quela dei ristoranti del Michigam 😛
    Ciao

  • Mozilla Firefox 3.0.3 Windows XP

    Allora, correggo alcune cose – sbagliate – che ho detto sulla geo location.
    Geode è l’estensione per FF3.0 che integra le funzionalità di supporto alla geo location previste in HTML 5 che dovrebbero essere presenti anche in FF 3.1

    L’estensione (o FF 3.1) dovrebbero avere un metodo di calcolo della posizione geografica se ci si connette via wireless, altrimenti con l’estensione geo location (che a me non funziona) si inserisce la posizione precisa.

    Su Mozilla.org si dice che uno dei migliori siti per provare tale funzionalità è:
    http://fireeagle.yahoo.net/
    previa registrazione.

    Non viene passata nell’user agent, ma viene richiesto al browser (e si può o meno accettare di mandare i dati al sito che li richiede).
    Ciao

  • Opera 9.62 Windows Vista

    @ Sleeping
    di Opera esiste già sui Labs da circa un annetto una versione sperimentale che supporta i tag audio e video (mi pare sia sempre l’ultima versione a cui aggiungono questo supporto)quindi se vuoi fare un giro di prova puoi già verificarne le prestazioni… io veramente pensavo li avrebbero integrati in modo definitivo con la versione 9.5 ma non credo che “faglieranno” anche con la 10

    C’è ancora qualche piccolo miglioramente da fare

    Per l’appunto… ecco perchè non credo molto nel loro successo

    Interessante, ora resta solo poter mettere i bordi arrotondati, un pò per tutti… (anche se FF e safari hanno un loro codice non ufficiale che lo permette ma non ti fa passare il validatore)

    Io non capisco perchè non ufficializzano tutte le varie specifiche esistenti e la tagliano con sta storia dello sviluppo di CSS3… non si fa altro che aumentare la confuzione con specifiche proprietarie (e loro assenza in Opera)…. al limite aggiungeranno poi un CSS3.1 cavolo 👿

    Un saluto a tutta la truppa riunita :mrgreen:

Leave a Reply