Hvor å Legge ned Fonts Bruke CSS3

Webdesignere har vært begrenset av typografi ved hjelp av bare web-sikre fonter i mange år. Alternativer tidligere inkludert bruk av bilder, Flash, Javascript eller PHP-skript. Ankomsten av CSS3 bringer nye designvalg til webdesign. Dette inkluderer @ font-face velgeren, som gjør at skriften valgt i stilarket som skal brukes som en skriftfamilie element. Last ned skriften til Web vert for at @ font-face velgeren til å fungere. De fleste nettlesere støtter @ font-face velgeren, noe som gjør den ideell for cross-browser presentasjoner i webdesign.

Bruksanvisning

1 Åpne din tekst editor. Klikk på "File" og "Open", velg deretter din CSS-fil. All tekst editor vil åpne en CSS-fil.

2 Tilsett @ font-face velgeren til CSS-fil sammen med font-family og src elementer. For eksempel, hvis din skriftfilen er Times.ttf, deretter @ font-face velgerkoden vises som følger:

@ Font-face {font-family: Times; src: lokale (Times.ttf) format ( «Truetype"); }

3 Konverter font fil til EOT for IE støtte av @ font-family. Klikk på "Browse" for å laste TTF-filen og klikk på "Konverter TTF til EOT!" å konvertere filen.

4 Legg til URL velgeren for EOT filen til CSS-fil, som i følgende eksempel:

@ Font-face {font-family: Times; src: url (Times.eot); src: lokale ( "Times"), (Times.ttf) format url ( "Truetype"); }

Dette laster IE skriften før True Type font, som dekker alle nettlesere som støtter @ font-face embedding.

5 Utnytte skriftfamilien element for å bruke den innebygde skriften. For eksempel, ville du skrive følgende for å bruke Times.tff for hele websiden:

body {font-family: "Times", Verdana, Helvetica, sans-serif; }

Dette laster den innebygde skrift Times for hele websiden. Men hvis nettleseren ikke støtter @ font-face, da nettleseren vil velge en av de andre web-safe fonter oppført etter Times.

Hint

• Bruk bare skrifter som du har kjøpt til bruk på nettet.