Filoweb.it

Web fonts con @font-face


FB TW whatsapp RSS FEED News letter
CSS
Web fonts con @font-face


Grazie alla direttiva @font-face, infatti, possiamo usare i nostri font preferiti e servirli all’utente in un modo facile e veloce.

Con questa definizione ci si riferisce di solito ai font che l’utente può scaricare per visualizzare una pagina secondo le caratteristiche tipografiche fissate dall’autore nel foglio di stile.

Di norma un kit di font da usare con @font-face comprende la versione TrueType/OpenType, quella WOFF e quella EOT.

---

Esempio:

@font-face {

font-family: ' ArmWrestler' ;

src: url(' armwrestler-webfont.eot' ); /* per IE 5-8 */

src: local(' ?' ), /* direttiva local per IE */

url(' armwrestler-webfont.woff' ) format(' woff' ), /* Firefox 3.6+, Chrome 5.0+, IE 9.0+ */

url(' armwrestler-webfont.ttf' ) format(' truetype' ); /* Opera, Safari */

}



----

Con font-family assegniamo un nome al font; è il nome che useremo successivamente quando dichiareremo nel foglio di stile la font-family; possiamo assegnare qualunque nome, ma è sempre conveniente fare riferimento a quello ufficiale del font.

Subito dopo, con il primo src, definiamo l’URL del font in formato EOT per Internet Explorer 5-8.

Nella riga successiva definiamo un nuovo attributo src, usando prima di tutto la direttiva local tramite la quale facciamo in modo che IE non scarichi anche la versione TTF del font consumando inutilmente banda e allungando i tempi di caricamento della pagina. Nell’ultima versione della sua sintassi ottimizzata per @font-face, Paul Irish consiglia di assegnare come valore della direttiva local uno smiley (per inserirlo rapidamente da tastiera su Windows basterà usare la combinazione ALT + 1 del tastierino numerico).

Infine, impostiamo l’URL del font in formato WOFF e quello per il formato TrueTyp

Ora non ci resta che usare i nostri font nelle dichiarazioni CSS consuete. Nell’esempio abbiamo usato solo questa regola:



body {

font: 14px ArmWrestler,Verdana, Arial, sans-serif;

}







<!DOCTYPE HTML>

<html>

<head>

<title>Font e testo - @font-face - </title>

<style type=" text/css" >

@font-face {

font-family: ' ArmWrestler' ;

src: url(' armwrestler-webfont.eot' ); /* per IE 5-8 */

src: local(' ' ?' ), /* direttiva local per IE */

url(' armwrestler-webfont.woff' ) format(' woff' ), /* Firefox 3.6+, Chrome 5.0+, IE 9.0+ */

url(' armwrestler-webfont.ttf' ) format(' truetype' ), /* Opera, Safari */

}

body {

font: 14px ArmWrestler,Verdana, Arial, sans-serif;

}

#box1 {

width:400px;

height:400px;

padding:20px;

color:#000;

background-color: hsla(0,100%,100%,0.5);

}

</style>

</head>

<body>

<div id=" box1" >

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

</body>

</html>
FB TW whatsapp RSS FEED News letter

filoweb.it è il sito personale di Filippo Brunelli
(c) 2017 Filippo Brunelli
Le immagini ed i testi contenuti nel sito filoweb.it sono di proprietà di Filippo Brunelli salvo diversamente indicato.
L'uso delle immagini e del testo è gratuito per uso personale ed è subbordinato alla citazione della fonte.
Brunelli Filippo declina ogni responsabilità per l'uso che viene fatto delle informazioni presenti nel sito filoweb.it.
X
La tua privacy è importante
Utilizziamo, senza il tuo consenso, SOLO cookies necessari alla elaborazione di analisi statistiche e tecnici per l'utilizzo del sito. Chiudendo il Cookie Banner, mediante il simbolo "X" o negando il consenso, continuerai a navigare in assenza di cookie di profilazione. More info

Tutti
Cookie tecnici
I cookie tecnici sono necessari al fine di "effettuare la trasmissione di una comunicazione su una rete di comunicazione elettronica, o nella misura strettamente necessaria al fornitore di un servizio della società dell'informazione esplicitamente richiesto dal contraente o dall'utente a erogare tale servizio" (art. 122, comma 1 del Codice privacy).
Cookie analitici di terze parti
I cookie analytics sono utilizzati al fine di valutare l'efficacia di un servizio della società dell'informazione fornito da un titolare di un sito, per progettare un sito web o contribuire a misurare il "traffico" di un sito web, ovvero il numero di visitatori ripartiti per area geografica, fascia oraria della connessione o altre caratteristiche.
Cookie di profilazione
Sono cookie che creano profili personalizzati relativi all'utente per finalità di marketing, ad esempio il retargeting o advertising sui social network.

FILOWEB.it Piccolo quaderno degli appunti. Argomento: CSS, Titolo:Web fonts con @font-face. Altri script riguardano: CSS, Jscript, .net, Classic Asp, HTML, Jquery, varie, url rewrite, pagina protetta da password, ecc. Altro su https://www.filoweb.it