Brugere lige nu: 1
Indlæs andet indhold på denne side:
Man er næppe kommet ret langt i sit arbejde med at lave en hjemmeside, før behovet for at kunne styre skriftstørrelser, fonte, afsnit og overskrifter melder sig. Det er netop emnet for denne side.
Siden er opdateret 7. 12. 2011
Hvis du bare skriver din hjemmeside helt uformateret, har du faktisk ingen præcis viden om, hvordan den ser ud i brugerens browser. Du har nemlig ingen sikker viden om, hvilken font (skrifttype) brugeren har sat sin browser til at vælge, når ikke andet er specificeret i de hjemtagne HTML-dokumenter.
Vil du have et fastere greb om, hvordan dine sider ser ud hos brugeren, er du derfor nødt til at bestemme selv, hvilke fonte der skal bruges hvor.
På siden om CSS-styring af siderne har jeg vist, hvordan dette kan standardiseres, så du ikke hele tiden skal fontbestemme al teksten, efterhånden som du skriver.
Det skal måske lige, for god ordens skyld pointeres, at man ikke skal specificere en font, som man ikke kan være sikker på, at de fleste har installeret på deres maskiner.
Det er altså ikke nok, at du har en eller anden smadderflot font på din maskine og at det ser pragtfuldt ud hos dig, hvis brugerne ikke har den samme font installeret. De er så helt afskåret fra at nyde dit flotte sidedesign.
Du må med andre ord holde dig til ganske få forskellige fonte, som i forskellige forklædninger er installeret hos de fleste. Disse fonte kan deles op i 3 grupper og det er muligt at ramme alle ved at medtage alle fontene i den ønskede gruppe - der er næppe nogen brugere, som ikke har installeret mindst én af fontene i hver af de 3 grupper.
Brugerens browser vil så automatisk anvende den første i listen, som er installeret hos denne bruger. Du på din side kan blande "kortene" som du vil - du er altså ikke bundet af at skulle nævne fontene i en bestemt rækkefølge, den første i listen behøver ikke engang at være installeret hos dig - men så kan du bare ikke selv se, hvordan siden kommer til at se ud hos brugerne.
De gængse fonte kan opdeles i disse 3 grupper:
- Sans serif, proportional :
- arial, comic sans ms, comic, haettenschweiler, helvetica, impact, ms sans-serif, swiss, univers, verdana
- Serif, proportional :
- times new roman, times, century
- Monospace :
- courier new, courier, fixedsys
Specielt for fonten Impact kan siges, at den er flot til overskrifter, hvor relativt mange karakterer ikke må fylde for meget i bredden.
Vi er nu klar til at vise, hvordan man specificerer en font til at blive brugt til en given tekst, men husk, at du SKAL definere fonte i css.
| Sådan kodes det : | Dette er resultatet : |
|---|---|
| <span style="font-family:Arial, Helvetica, Sans-Serif">Denne tekst er formatteret til at blive vist i Arial (eller Helvetica)</span> | Denne tekst er formatteret til at blive vist i Arial (eller Helvetica) Sans-Serif definerer skriftfamilien, hvis brugerens computer ikke har de andre skrifttyper installeret. |
| <span style="font-family:'Times New Roman', Serif">Denne tekst er formateret til at blive vist i Times New Roman</span> | Denne tekst er formateret til at blive vist i Times New Roman Serif definerer skriftfamilien, hvis brugerens computer ikke har den anden skrifttype installeret. |
| <span style="font-family:'Courier New', Courier, Monospace">Denne tekst er formateret til at blive vist i Courier New (eller Courier)</span> | Denne tekst er formateret til at blive vist i Courier New (eller Courier) Monospace definerer skriftfamilien. |
| <span style="font-family:Impact, Sans-Serif; font-size:14pt">Denne tekst er formateret til at blive vist i Impact - 14 pt</span> | Denne tekst er formateret til at blive vist i Impact - 14 pt |
| <span style="font-family:'Comic Sans MS', Comic, Monospace">Denne tekst er formateret til at blive vist i Comic Sans MS (eller Comic)</span> | Denne tekst er formateret til at blive vist i Comic Sans MS (eller Comic) |
Bemærk, at hvis fontnavnet består af mere end ét ord, skal der anførselstegn omkring fontnavnet.
Vi er slet ikke færdige med skrifttyper endnu: Der er også sådan noget som fede og kursiverede, ja sågar fede kursiverede skrifter. Der er mulighed for understregede, sænkede eller hævede skrifter (sænkede skrifter anvendes især i forbindelse med notation af kemiske formler f.eks. H2O for vand og hævet skrift kan anvendes ved angivelse af flade- og rummål f.eks. m2 og ved angivelse af temperaturgrader f.eks. 37oC).
Alt dette laver du på denne måde, de 3 øverste kan kombineres efter behov (se det fjerde eksempel):
| Sådan kodes det i css : | Sådan kaldes klassen : | Dette er resultatet : |
|---|---|---|
| .b{ font-weight:800 } |
<span class="b">fed skrift</span> | fed skrift |
| .i{ font-style:italic } |
<span class="i">kursiveret skrift</span> | kursiveret skrift |
| .u{ text-decoration:underline } |
<span class="u">understreget skrift</span> | understreget skrift |
| klasserne for kursiveret og fed brugt sammen | <span class="i b>fed kursiveret skrift</span> | fed kursiveret skrift |
Hævet og sænket skrift kan ikke kodes i css, her er du nødt til at gøre sådan:
| Sådan kodes det : | Dette er resultatet : |
|---|---|
| <sub>sænket</sub> skrift | sænket skrift, dette er normalhøjden |
| <sup>hævet</sup> skrift | hævet skrift, dette er normalhøjden |
Vi er stadig ikke færdig med skrifttyper, der er nemlig endnu en mulighed. Hvis du skal vise noget tekst, der på en eller anden måde adskiller sig fra den øvrige tekst, f.eks. hvis du vil citere noget kode, kan det være en fordel at lade denne tekststump være vist med "skrivemaskineskrift" - det gør du ved at sætte dette tag omkring den ønskede stump tekst:
<tt>Maskinskrevet tekst</tt>