Nwlapcug.com


Come incorporare tipi di carattere utilizzando CSS3

Come incorporare tipi di carattere utilizzando CSS3


Web designer sono stati limitati dalla tipografia utilizzando solo i font Web-safe per molti anni. Alternative precedentemente incluso usando immagini, Flash, JavaScript o PHP script. L'avvento del CSS3 porta nuove scelte di design al Web design. Questo include il selettore di @font-face, che consente il tipo di carattere selezionato nel foglio di stile per essere utilizzato come un elemento di famiglia di font. Caricare i font per il Web host in modo che il selettore di @font-face a lavorare. Maggior parte dei browser supportano il selettore di @font-face, che lo rende ideale per le presentazioni cross-browser nel Web design.

Istruzioni

1

Aprite il vostro editor di testo. Fare clic su "File" e "Open", quindi scegli il tuo file CSS. Qualsiasi editor di testo si aprirà un file con estensione CSS.

2

Aggiungere il selettore @font-face al file CSS insieme agli elementi font-family e src. Ad esempio, se il file di font TTF, quindi il codice del selettore @font-face apparirà come segue:

@font-face {font-family: volte; src: locale format("truetype") (ttf);}

3

Convertire il vostro file di carattere EOT per il supporto browser IE di @font-family. Fare clic su "Sfoglia" per caricare il tuo file TTF e fare clic su "Convert TTF di EOT!" per convertire il file.

4

Aggiungere il selettore di URL per il file EOT file CSS, come nell'esempio seguente:

@font-face {font-family: volte; src: url (Times.eot); src: locale ("volte"), format("truetype") url (ttf);}

Questo carica il tipo di carattere di IE prima il font True Type, che copre tutti i browser che supportano l'incorporamento @font-face.

5

Utilizzare l'elemento famiglia di font per utilizzare il tipo di carattere incorporato. Ad esempio, si digiterà quanto segue per utilizzare gruppi per l'intera pagina Web:

Body {font-family: "Times", verdana, helvetica, sans-serif;}

Questo carica i tempi di tipo di carattere incorporato per l'intera pagina Web. Tuttavia, se il browser non supporta @font-face, il browser sceglierà uno dei altri font Web-safe elencati dopo volte.

Consigli & Avvertenze

  • Utilizzare solo caratteri che avete acquistato per l'utilizzo online.