CSS3 Font

Regole CSS3 @ font-face

Le versioni precedenti di CSS3, web designer hanno dovuto usare sul computer dell'utente è già installato i font.

Utilizzare CSS3, web designer possono utilizzare qualsiasi tipo di carattere che lui / lei piace.

Quando si trova il file che si desidera utilizzare il tipo di carattere, il file di font sarà semplicemente essere incluso nel sito, verrà scaricato automaticamente alle esigenze degli utenti.

Font a scelta nella nuova versione su CSS3 @ descrizione della regola font-face.

I suoi "proprio" font sono definiti nel CSS3 regola @ font-face.

Supporto per il browser

I dati riportati nella tabella rappresentano il primo browser a supportare il numero di versione della proprietà.

Internet Explorer 9+, Firefox, Chrome, Safari e Opera supporto WOFF (Web Open Font Format) font.

Firefox, Chrome, Safari e Opera supporto TTF (True Type Font) e .otf (OpenType) carattere tipo di carattere).

Chrome, Safari e Opera supportano anche i font SVG / crollati.

Internet Explorer supporta anche EOT font OpenType (embedded).

Nota: Internet Explorer 8 e le versioni precedenti non supportano la nuova regola @ font-face.

È necessario utilizzare il tipo di carattere

Nella nuova regola @ font-face, è necessario prima definire il nome del font (come myFirstFont), e poi puntare al file di font.

	Suggerimento: URL Usa carattere minuscolo, maiuscolo in IE produrranno risultati inaspettati

Per utilizzare il font per l'elemento HTML, per riferirsi al nome del font (myFirstFont) dalle proprietà font-family:

Esempi

<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}

div
{
font-family:myFirstFont;
}
</style>

Prova »

Utilizzare testo in grassetto

È necessario aggiungere un'altra regola @ font-face che contiene il testo in grassetto:

Esempi

@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}

Prova »

Il file "Sansation_Bold.ttf" è un altro file di font che contiene carattere grassetto Sansation.

L'utilizzo di questo testo del browser ora famiglia di font "myFirstFont" dovrebbe essere reso in grassetto.

Così si può avere molti degli stessi carattere regola @ font-face.

CSS3 descrizione del carattere

La seguente tabella elenca tutte la descrizione del carattere e l'interno della definizione regola @ font-face: