Hvor å Legge ned TTF fonter i CSS

Hvor å Legge ned TTF fonter i CSS


Innebygde skrifter er ikke noe nytt for webdesign. Selv font-erstatning teknikker som Cufon og sIFR kom i bruk rundt 2008, er CSS font embedding en funksjon som rullet ut med CSS2 og er kompatibel med Internet Explorer så langt tilbake som versjon fem. Teknikken krever at du laste opp skriften, det være seg Truetype eller et annet format, og deretter lage en "@ font-face" regelen i CSS. Når det er gjort, kan du referere til den innebygde skriften på samme måte som du refererer til Web-safe fonter.

Bruksanvisning

1 Åpne HTML-filen for Web-siden hvor du ønsker å vise den innebygde skriften. For nettsteder eller maler ved hjelp av en egen header fil, åpne den i stedet. Bruk en kode-redigering program som Notepad ++, jEdit eller BBEdit. Se etter følgende kodelinje i toppen av HTML-filen:

<Link rel = "stylesheet" type = "text / css" href = "sti / til / stylesheet.css" />

Se på navnet på CSS-filen referert til i <link> -taggen og åpne denne filen i koden editor. Hvis du ikke ser noen <link> -taggen, lage en og deretter opprette en tom CSS fil.

2 Legg til følgende kode på toppen av CSS-filen:

@ Font-face {

font-family: "Skriftnavn Her ';

src: URL ( 'fontfile.ttf') format ( 'TTF');

}

Gi en skriftfamilienavn til font. Du kan bruke hvilket som helst navn, men pinne med et navn som er lett å skrive og huske. Skriv inn hele eller relative banen til ttf filer mellom parentes etter "URL".

3 Bruk den innebygde skriften som du ville bruke en web-sikker font som Arial, Helvetica eller Georgia. Her er et eksempel:

h1 {

font-family: "Skrift navn her", "Another Skrift", generisk;

}

Ovennevnte kode gjør alle <h1> tags bruke innebygd font. Bør den innebygde skriften ikke fungerer, vil nettleseren bruker "Another Skrift" for nivå ett overskrifter. Når det gjelder "Another Skrift" ikke finnes på brukerens datamaskin, går nettleseren til den siste skrift. Bruk en generisk familienavn her som "serif" og "sans-serif".

4 Last opp din skrift med en FTP-verktøyet. Hvis du ikke bruker FTP, kan du også logge inn på din web hosting kontrollpanelet og deretter navigere til filen styringsverktøy. De fleste web verter tilbyr dette verktøyet, som lar deg laste opp noen filer på en gang via nettleseren din.

Hint

  • Bruk Google Web Fonts å plukke en skrifttype, kopierer <link> -taggen for en spesiell stil ark ligger på Googles servere og ta tak i koden for å inkludere i din egen CSS-fil. Dette er en enkel måte å "bygge" en font uten vert det på din egen server.
  • Bruk en font-erstatning teknikk som sIFR eller Cufon om du har valgt skrifttype ser ut for hakkete eller skarpe når innebygd. Disse teknikkene bruke skript som legger anti-aliasing for skrifttyper for å myke opp kantene.
  • Ikke bruk fonter uten først å lese deres vilkår for bruk. Ikke alle skrifter er gratis å bruke på internett, selv om du lastet dem ned gratis. Noen stiller du kan bruke skriften på en ikke-kommersiell side.