Visualizzare propri font nelle pagine web

17 Ottobre 2008 - CSS

Con il rilascio della versione beta di Firefox 3.1 sono state introdotte nuove funzionalità per i CSS.

Una delle regole supportate dalla nuova versione del noto browser permette di specificare un font che l’utente può scaricare per visualizzare la pagina come era nelle intenzioni dello sviluppatore.

@font-face è attualmente supportata su Mac OS X e Windows, ma non in Linux.

Sintassi

@font-face {
  font-family: <a-remote-font-name>;
  src: <uri>;
}

Valori

– specificare un nome di font che verrà utilizzato come font face
– URL della locazione del font file

Esempio

<html>
<head>
  <title>Esempio Web Font</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Guilty grunge";
      src: url("https://www.mainickweb.com/esempi/css/GUILTY__.TTF");
    }

    body {
      font-family: "Guilty grunge", serif;
      font-size: 40px;
    }
  </style>
</head>
<body>
  This is Bitstream Vera Serif Bold.
</body>
</html>

Ecco la pagina di esempio con il codice sopra, visualizzabile solo con Firefox 3.1.

Potrebbero Interessarti

1 Dicembre 2008 Come ottenere sempre la compatibilità Cross Browser Tuttavia bisogna informarsi e verificare questi problemi di rappresentazione: ad esempio, un font che probabilmente non dovreste usare è Lucida Grande/Sans, il quale rende bruttissimo in Internet Explorer. ...È necessario specificare la dimensione in percentuale […]
15 Luglio 2010 Trasformazioni sui link con CSS Quando si passa su un link, l'elemento si anima e si inclina verso sinistra o destra. Gli effetti sono stati creati solo con i CSS. Vengono utilizzate le funzionalità di transizione specifiche per ogni browser tramite hack CSS (dato che ciascuno ha il proprio prefisso). La […]
18 Dicembre 2009 Creare una lista a due colonne: fissa + liquida Questo tutorial risolverà la maggior parte dei problemi CSS che si hanno in generale quando si vuole realizzare un effetto come da titolo: una lista a due colonne di cui la prima di larghezza fissa e la seconda che occupa tutta la parte rimanente nel browser. Si crea prima la […]
12 Luglio 2010 Drop Shadows con CSS3 Funziona su tutte le ultime versioni di Opera, Chrome, Safari e Firefox, anche se su Opera e Firefox le trasformazioni non sono proprio ottime come Webkit, motore di Safari e Google Chroem. Pagine HTML Foglio di stile CSS3 Fonte Nimbupani Designs e demo.

Francesco Gavello

Mi chiedo: sarà un macello di font in stile “comic sans” e simili in giro per tutte le pagine? E quanti permetteranno il download del loro font senza avere la relativa licenza d’uso?

17 Ottobre 2008
MaiNickWeb

@ Francesco Gavello:
secondo me questa regola sarà usata solo dai webdesigner nativi, che vedono una pagina web come un pagina di Photoshop o Illustrator.

17 Ottobre 2008