Förbättra din webbplats med anpassad teckensnitt

October 8

Till de flesta webbdesigners, inte teckensnitt teckensnitt inte flöda över. De 11 inbyggda teckensnitt till Apple iOS, som visas i denna figur, är bedrövligt otillräckliga. Allvarliga formgivare tillbringar timmar med att söka efter precis rätt typsnitt för att förmedla känslan de vill framkalla i en design. Thata € s varför många designers är glada att CSS 3 erbjuder en ny lösning.

Förbättra din webbplats med anpassad teckensnitt

Den @ font-face alternativet, nytt i CSS 3, gör att du kan länka till alla typsnitt som finns tillgängliga från en webbserver. Tillsätt lite skugga och andra stylingelement med CSS, och du kan skapa fantastiska typsnittseffekter utan att tillgripa den gamla lösningen för begränsade typsnitt: spara bilder av formaterad text som skapats i Photoshop.

När du genererar koden du behöver på Font Squirrel, kan du börja använda typsnittet på dina webbsidor i några enkla steg. Följande exempel visar koden du ser om du kör ett anpassat teckensnitt genom Font Squirrel generatorn.

Först, du lägger typsnittet till huvudområdet på din sida med hjälp av denna syntax:

@ Font-face {
font-family: "GoodDogRegular ';
src: url ('GoodDog-webfont.eot');
src: url ('? GoodDog-webfont.eot iefix') format ("EOT),
url ('GoodDog-webfont.woff') format ("WOFF),
url ('GoodDog-webfont.ttf') format ("Truetype"),
url ('GoodDog-webfont.svg # webfontx1QlgLst') format ("svg ');
font-weight: normal;
font-style: normal;
}

Då du inkluderar teckensnitt i en stil regel, och du kan använda den till någon text på din sida.

.stylename {
font-family: "GoodDogRegular ';
}

Följ dessa steg för att lägga till några av teckensnitten i Google Font Directory till dina sidor:

  1. Öppna en webbläsare (vi rekommenderar Safari: den stationära versionen är närmast versionen i iOS) och besöka Google Web Fonts.
  2. Klicka på namnet på alla teckensnitt att välja det teckensnitt du vill använda i din design.
  3. Klicka på fliken Använd denna Font längst upp på sidan för att generera koden du behöver, så som visas.

    Förbättra din webbplats med anpassad teckensnitt

  4. Kopiera länken i det första fältet och klistra in den i huvudet området på din webbsida.
  5. Kopiera koden för teckensnittet familjen från det andra fältet på Google Font Directory font sida och klistra in den i CSS-formatmallen för din webbsida.

    I det visade exemplet, ser du att Google har genererat regeln i en stil för <h1> taggen. Du kan använda denna kod för att skapa en stil för <h1> tagg med det teckensnitt du valt, men du har också möjlighet att lägga teckenregeln till någon annan CSS.
  6. Tillämpa regeln till text i din webbsida.

    Om du använder hela <h1> regeln som tillhandahålls av Google, någon text formaterad med <h1> tagg visas i det typsnittet. Om du skapar en ny klass eller ID-stil med typsnittet som en del av regeln, gäller dig stilen till din text för teckensnittet visas, precis som du skulle behöva tillämpa någon annan stil.