lille-web webdesign

@font-face & Skriftyper på hjemmesiden

I dag er vi heldigvis ikke begrænset til kun at benytte Arial, Verdana og få andre "web-sikre" skrifttyper på hjemmesiden

... til stor glæde for mange webdesignere!

Med CSS @font-face selectoren som allerrede kom med CSS2, blev det muligt at benytte andre fonte på hjemmesiden end tidligere. Internet Explorer var for en gang skyld bannerførende og allerrede IE 5 kunne tolke @font-face.
Desværre sker der hurtigt det vanlige med de forskellige webbrowsere, at de opfinder hver deres standard, som fontene skal gemmes i, for at netop de kan tolke dem.

  • Embedded Open Type (.eot) benyttes af tidligere versioner af Internet Explorer
  • TrueType (.ttf) og OpenType (.otf) benyttes af Safari og Opera og tidligere versioner af Mozilla Firefox og Google Chrome
  • WOFF (.woff) benyttes af Firefox 3.6+, Internet Explorer 9+ og Chrome 5+
  • SVG (.svg) til iPad og iPhone (iOS)

Derfor er vi nødsaget til at benytte flere versioner af den samme font for at tilfredsstille de forskellige browsere.

@font-face {
  font-family: "Navn på den valgte font";
  src: url("file-navn.eot");
  src: local("☺"),
  url("file-navn.woff") format("woff"),
  url("file-navn.otf") format("opentype"),
  url("file-navn.svg#file-navn") format("svg");
  }

Som det ses af ovenstående CSS snippet, kaldes alle formaterne for at tilfredsstille de forskellige browsere. Som det ses i ovenstående loades .eot først, eot var format som de ældre versioner som IE benytter, og det er netop for at undgår at de helt dropper vores flotte skrifttype at vi først loader netop dette format. Når ædlre versioner af IE møder et format de ikke forstår, droppes resten af informationerne i den pågældende snippet, derfor er det selvfølgelig vigtigt at præsenterer noget der giver mening for IE først!

En lille spidsfindighed er src: local("☺"), en lokal font (på din PC eller Mac) der ikke findes!
læs mere om dette hack her

Nu har vi tilføjet én ny font på hjemmeside, men desværre kun i normal visning. For at kunne benytte skrifttypen i fed er vi desværre nødsaget til at :

@font-face {
  font-family: "Navn på den valgte FEDE font";
  src: url("file-navn-FED(bold).eot");
...
  }

Pas på mængden af filer!

Er der også brug for Italic og flere andre fonte på hjemmeside, kommer man hurtigt til at benytte en del filer og derved forøge mængede af data, der skal hentes for at vise hjemmesiden, som webdesigneren havde tænkt sig. Derfor skal man altid tænke sig godt om, med hvilke og hvor mange font der er nødvendig i ens webdesign.
HUSK: Et lækkert webdesign er vigtig ... men det er en hurtig hjemmeside også!

Hvor finder jeg nye fonte?

I dag er der mange steder på internette hvor man gratis eller for få penge, kan købe nye fonte til hjemmesiden. Her er listet nogle af de mest brugte.

  1. www.fontsquirrel.com
  2. www.google.com/webfonts
  3. https://typekit.com

FONT Squirrel

FONT Squirrel skal du benytte at 2 grunde (mindst). Nr. 1 fordi det er en guldgruppe af gratis web-fonte til at jazze dit webdesign op med. Nr.2 som måske er vigtigere, er FONT Squirrel @font-face Generator. En service hvor man kan generere alle de nødvendig formater af den font man ønsker.
Måske har du fundet en skrifttype på FONT Squirrel eller en hel anden hjemmeside, men desværre ligger den kun i oft format. Da du helst ikke vil skuffe dine besøgene, der bruger webbrowsere som ikke læser dette format, kan du ved at uploade din .oft fil modtage alle formaterne... og alle der besøger din hjemmeside er glade og tilfredse!
www.fontsquirrel.com/fontface/generator

Google Web Fonts

Google Web Fonts virker på en lidt anden måde end beskrevet ovenfor. Her uploades font-filerne ikke til egen web-server, men kaldes via CSS eller Javascript direkte fra Google´s server. Her skal man igen begrænse mængde af server-kald og filstørrelser for ikke at gøre hjemmesiden langsom. Ved hver font på Google Web Fonts vises en fin hastighedsmåler der tydeligt viser hvor meget den ønskede skrifttype belaster hjemmesidens load hastighed.

Typekit

Typekit er en betalingsservice, hvor man årligt betaler for at kunne benytte deres web fonte. Lidt som med Google Web Fonts tilføjes skrifttypen via Javascript.

Eksempler på tre fonte fra Google Web Font:

Google = Baumans
Google = Fascinate Inlinet
Google = Bilbo

CSS eksempler

  • Text-shadow

    Tekst med skygge effekt
    { text-shadow: 2px 2px 2px #666666; }

    Første tal skubber skyggen mod højre, næste tal skubber skyggen nedad og sidste tal forstørre/udvisker (blur) skyggen. Til sidst angives farven på skyggen (#666666;).

    • Chrome
    • FireFox
    • Opera
    • Safari
    • Internet Explorer

  • Text-transform

    Teksten skrives med store bogstaver - ved brug af uppercase
    Teksten skrives med store bogstaver ved hvert nyt ord - ved brug af capitalize
    Teksten skrives med SMÅ bogstaver - ved brug af lowercase
    { text-transform: uppercase; } { text-transform: capitalize; } { text-transform: lowercase; }
    • Chrome
    • FireFox
    • Opera
    • Safari
    • Internet Explorer

  • Rotate

    Teksten kan vinkles ved brug af rotate
    { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); }
    • Chrome
    • FireFox
    • Opera
    • Safari
    • Internet Explorer

    Skal vinklen ændres i ældre versioner af IE, er man desværre begrænset til 0, 90, 180 eller 270 grader. (rotation=0, 1, 2 eller 3)

    /* IE8 og ned */ { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }

Tilbage