Corsi on-line

Font da remoto con @font-face

La proprietà @font-face è stata introdotta in CSS 3 per ovviare ad un problema che affliggeva le vecchie versioni delle regole di stile per il Web, esso si basa infatti sul modulo Web Fonts che era già disponibile per CSS2 rimanendo però praticamente ingorato.

@font-face consente di  specificare un indirizzo URL verso un font che verrà scaricato e installato in modo da renderlo disponibile per l’utilizzo all’interno di una pagina Internet.

Prima della sua introduzione era possibile specificare un font unicamente effettuando un riferimento ad un nome di font  o a una font family tenendo conto dei font che potevano essere già installati nella memoria fisica di un Pc; il vantaggio insito nell’utilizzo di @font-face è evidente perché con esso non si fa riferimento ad un nome ma ad un file font ben preciso.

Le URL che definiscono i percorsi per utilizzare i font  con @font-face possono essere sia relative che assolute, è chiaro però che la vera novità sta nel poter utilizzare font disponibili in remoto:

@font-face{
 font-family: 'nome_font';
 src: url(’http://www.nomesito.it/web-fonts/nome_file_font.ttf’);
 }

@font-face mette a disposizione anche il supporto per gli OpenType fonts oltre che per i classici TrueType fonts.

Post correlati
  • quindi se non ho capito male nel file css metto

    /*foglio css*/
    @font-face{
    font-family: ‘latah’; /*o altro nome a caso*/
    src: url(’http://www.nomesito.it/web-fonts/latah.ttf’);
    }
    body {
    font-family: latah;/*o il nome che ho messo a caso*/
    /*eccetera*/
    }

    e quindi l’utente vede i testi in latah anche se non li ha sul suo pc?

  • Esatto, come vedi l’utilità e palese, non so però quali possano essere le implicazioni per la sicurezza.

I più letti del mese
Tematiche