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. x


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 Tegnstørrelser 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):


Fonte med seriffer (fødder)
Georgia, serifGeorgiaGeorgia
"Palatino Linotype", "Book Antiqua", Palatino, serifPalation Linotype
Book Antiqua
Palation Linotype
Book Antiqua
"Times New Roman", Times, serifTimes New Roman
Times
Times New Roman
Times
Fonte uden seriffer (fødder)
Arial, Helvetica, sans-serifArial
Helvetica
Arial
Helvetica
"Arial Black", Gadget, sans-serifArial Black
Gadget
Arial Black
Gadget
"Comic Sans MS", cursive, sans-serifComic Sans MS
Cursive
Comic Sans MS
Cursive
Impact, Charcoal, sans-serifImpact
Charcoal
Impact
Charcoal
"Lucida Sans Unicode", "Lucida Grande", sans-serifLucida Sans Unicode
Lucida Grande
Lucida Sans Unicode
Lucida Grande
Tahoma, Geneva, sans-serifTahoma
Geneva
Tahoma
Geneva
"Trebuchet MS", Helvetica, sans-serifTrebuchet MS
Helvetica
Trebuchet MS
Helvetica
Verdana, Geneva, sans-serifVerdana
Geneva
Verdana
Geneva
Fonte med ens tegnbredde
"Courier New", Courier, monospaceCourier New
Courier
Courier New
Courier
"Lucida Console", Monaco, monospaceLucida Console
Monaco
Lucida Console
Monaco




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:

<link rel="stylesheet" href="/xxxxx/fonte/fontecss.css" />

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: x


FUTURA BOLD æøå ÆØÅ

Billabong æøå ÆØÅ




Google Fonts


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


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: x


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. æ ø å Æ Ø Å





















x
x