Fonte

Websikre fonte

En font styrer, hvordan tegnene, der er defineret i den, skal se ud. Der er et utal af, nok især latinske, fonte. Mange af dem kommer dog nok til kort med hensyn til en del af eller måske alle "specialtegn", hvortil også Æ, Ø og Å hører. Det reelle antal brugbare fonte bliver derved mindre.

Anvendelsen af fonte på en HTML-side styres fra CSS med "font-family". Grunden til "family"-tilføjelsen er, at de såkaldt websikre latinske fonte sikrest angives med 3 i hver gruppe. Den først anførte, er den der primært vil blive anvendt. De to sidste angiver hhv en anden lignende font som reserve og (hvis begge de to foregående ikke er til rådighed), da en angivelse af, om der skal anvendes en tilfældig serif eller sans-serif font.

Verdana er specifikt designet til at være let læsbar på skærm

Størrelsen på tegn på en HTML-side styres fra CSS med "font-size". Som enhed anvendes typisk enheden "em". På denne side vises en oversigt over H1-H6 i noraml størrelse = 1.0em og brødtekst i 26 forskellige tegnstørrelser.

De 15 Websikre font-familier er (Bemærk at fler-ords fontene sættes i anførselstegn):

Webfonts - downloadede

En WEBFONT er en font, der er tilpasset så den giver god læsbarhed på en skærm. Der findes et betydeligt udbud af webfonts - både som freeware og som payware.

Webfonte downloades oftest som .zip-filer. Disse kan indeholde meget andet, end hvar der skal bruges. Til de mest udbredte browsere skaal der anvendes .ttf-filer (true type fonte). Filen kan placeres i serverens rod, i det aktuelle projekt, eller et sted ind imellem.

Webfonts kan hentes fra flere sites. Der kan derfor være forskelle i procedurerne.

Så tidligt som muligt - gerne før download - bør det sikres, at fonten kan skrive "Blåbærgrød" med både store og små bogstaver.

Efter placering af font-filen skal fonten installeres

Har man behov for - eller bare lyst til - at bruge en font, der ikke er websikker, er det ikke nok blot at referere til den i en CSS-selektor og håbe på det bedste.

Det er nødvendigt at downloade den ønskede font og gemme den som en '.tff'-fil. Udbuddet af - også gratis - fonte er meget stort.

Det tilrådes at placere downloadede webfonte i deres egen mappe (f.eks: FONTE) og også placere de tilhørende css-selektorer i en css-fil placeret der. Forbindelse til fontene etableres ved at indsætte et link:

enten så det kan nås fra alle sider eller kun fra de sider, der skal benytte downloadede webfonts.

En font kan downloades og ibrugtages ved at følge nedenstående forløb (Kontroller så tidligt som overhovedet muligt ):

En downloaded, udpakket og endelig placeret font skal muligvis aktiveres for at kunne anvendes: Åbn font-filen i stifinder ved at dobbeltklikke på den. Tryk på 'Installer'-knappen. Installationen tager nu nogle få sekunder.

Der skal nu foretages 2 css-opsætninger i css-filen i font-mappen for at bruge fonten:

• @font-face
  Højt oppe i css-filen placeres:
  

  @font-face { font-family: "xxxxx"; /* Det navn der skal bruges for fonten */ src: url(fontnavn.ttf);

  
  
• Selektor(er)
  For at kunne tilknytte fonten til de steder, hvor den skal anvendes, etableres en eller flere selektorer; f.eks.
  

  .classnavn{ font-family: "xxxxx", backupfont; }

  Der kan tilknyttes andre 'font'-deklarationer efter behov.
  Som 'backupfont' bør indsættes navnet på en websikker font.

Vil en webfont ikke fungere korrekt kan hjælp måske hentes her:

FUTURA BOLD æøå ÆØÅ

Billabong æøå ÆØÅ

Google Fonts

Google tilbyder adskilige hundrede fonte til fri afbenyttelse. De kan ses / hentes fra 'Google Font Directory':

Ibrugtagning

1. Udvælg
   Fra Google Font Directory selekteres den eller de relevante fonte ved at klikke på 'Add to Collection'.
   De udvalgte samles under 'Collection' nederst til venstre på skærmen.
   
   
2. Use - Standard
   Ved tryk på USE vises ny side. Under pkt. 3 - standard vises link.
   
   
3. Indsæt link
   Kopier linket til den eller de sider, hvor fonten(e) skal bruges - eller til en fælles include.
   
   
4. Opret selektor
   For hver font der er hentet etableres en tom selector (med hver sit navn):
   

   .google_fontxx { }

   
   
5. Indsæt deklaration
   Fra pkt 4 - Integrate the fonts into your CSS - kopieres en vist deklaration ind i hver sin tomme selektor:

   .google_fontxx { font-family: 'Gloria Hallelujah', cursive; }

   Til hver font kan der knyttes yderligere font-deklarationer (såsom size, style og weight) efter behov.
   
   
6. Brug selektoren
   Hver enkelt selektor kan nu bruges på normal vis:

   <p class="google_font03">Google font.</p>

   
   
   
7. Eksisterende selektor
   I stedet for pkt. 4 og 5 kan deklarationen indsættes i en eksisterende selektor.

Google font. æ ø å Æ Ø Å

Google font. æ ø å Æ Ø Å

Google font. æ ø å Æ Ø Å

Adobe Edge Web Fonts

Adobe udbyder godt 500 fonte til fri afbenyttelse. De kan ses / hentes her:

Ibrugtagning

1. Udvælg
   Ved at holde markøren over en font vises sort vindue med teksten "+Select this font". Ved klik på teksten vises halvt skærmbillede.
   
   
2. Indsæt link
   Kopier det viste link til den eller de sider, hvor fonten(e) skal bruges - eller til en fælles include.

   <script src="//use.edgefonts.net/aguafina-script:n4:all.js"></script>

   
   
3. Opret selektor
   For hver font der er hentes etableres en tom selector:
   

   .adobe_xxxxxx { }

   
   
4. Indsæt deklaration
   Fra pkt 4 - Integrate the fonts into your CSS - kopieres en vist deklaration ind i den tomme selektor:

   .adobe_xxxxxx { font-family: aguafina-script, cursive; }

   Til hver font kan der knyttes yderligere font-deklarationer (såsom size, style og weight) efter behov.
   
   
5. Brug selektoren
   Hver enkelt selektor kan nu bruges på normal vis:

   <p class="aquafina-script">Adobe font.</p>

   
   
6. Eksisterende selektor
   I stedet for 3 og 4 kan deklarationen indsættes i en eksisterende selektor.

Adobe font. æ ø å Æ Ø Å

Adobe font. æ ø å Æ Ø Å

Adobe font. æ ø å Æ Ø Å