CSS tilbyr også mange egenskaper for tilpasning av skriftutseendet. Disse spenner fra skrifttype til skriftstil til skyggeeffekter.
Blant CSS-skriver-egenskapene forstås opplysninger om skrifttype, skriftstil og skriftvekt. Disse egenskapene er selvsagt mest nyttige for HTML-elementer som inneholder tekst (p, i osv.). Men de kan også brukes for tabeller.
Med font-family kan skrifttypen som skal brukes defineres.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
p {font-family:verdana, sans-serif;}
h1 { font-family:"Courier New", Courier, monospace; }
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Das ist ein Absatz mit einem <strong>fetten Wort</strong>.</p>
<h2>Das ist eine Überschrift mit einem <strong>fetten Wort</strong>.</h2>
</div>
</body>
</html>Resultatet i nettleseren vil se slik ut:
Typiske skrifttyper er for eksempel Arial, Helvetica og Times Roman. Med CSS-egenskapen font-family kan man tilordne de ønskede skrifttypene. Om man oppgir flere skrifttyper, er rekkefølgen viktig. Er den første oppgitte skrifttypen tilgjengelig, vil den bli brukt. De ønskede skrifttypene skal skilles med komma. Som siste instruksjon noteres vanligvis en såkalt generisk skriftfamilie. Gjennom en slik generisk skriftfamilie gis nettleserne muligheten til å velge en skrifttype som er minst lik den oppgitte.
• serif = en skrifttype med seriffer
• sans-serif = en skrifttype uten seriffer
• cursive = en skrifttype for kursiv skrift
• fantasy = en skrifttype for uvanlig skrift
• monospace = en skrifttype med like tykke tegn.
Skriftstil
Gjennom egenskapen font-style kan du bestemme skriftstilen. Hvis den valgte skrifttypen tillater det, kan du tvinge frem en kursiv skrivemåte ved hjelp av verdien italic.
Andre skrifttyper kan vris ved å bruke oblique.
Neste CSS-egenskap som påvirker skriftutseendet heter font-variant. Gjennom denne kan såkalte små blokkbokstaver defineres.
For å definere små blokkbokstaver, brukes verdien small-caps med font-variant.
Skriftstørrelse
Å angi skriftstørrelsen er selvfølgelig også viktig. CSS har egenskapen font-size for dette. Skriftstørrelser kan oppgis i mange forskjellige enheter.
• EM
• REM
• Piksler
• Prosent
• Nøkkelord
Følgende nøkkelord-varianter er tilgjengelig:
• xx-small – veldig, veldig liten
• x-small – veldig liten
• small – liten
• smaller – mindre enn i foreldrelementet
• medium – middels
• large – stor
• x-large – veldig stor
• xx-large – veldig, veldig stor
• larger – større enn i foreldrelementet
Her er et eksempel på hvordan skriftstørrelsen kan angis:
.eins {font-size: 10px;}
.zwei {font-size: 20px;}
.drei {font-size: 110%;}
.vier {font-size: xx-large;}Og slik ser det ut i nettleseren:
Vær oppmerksom på at definitivene for skriftstørrelse er komplekse, siden de ulike enhetene har sine fordeler og ulemper. En god oversikt over hvilken enhet man bør bruke når, finner du på siden http://www.soeren-hentzschel.at/technik/programmierung/2011/01/16/px-pt-em-welches-ist-das-richtige-mas-fur-schrift/. For de av dere som ikke vil lese gjennom denne: Bruk relative angivelser som em for skjermdarling. For utskriftsoppsett bør man derimot bruke absolutte enheter som pt.
Skriftvekt
Videre går vi til det såkalte skriftvekten. Gjennom dette bestemmes tykkelse og styrke av en skrift. Egenskapen som brukes for dette er font-weight.
.fett {
font-weight:bold;
}
Ved denne syntaksen vil den uthevede teksten vises i fettskrift.
Mulige verdier er bold (fet), bolder (spesielt fet), lighter (tynnere) og normal. I tillegg er de numeriske verdiene 100, 200, 300, 400, 500, 600, 700, 800 og 900 tillatt. Disse spenner fra ekstra tynn (100) til spesielt fet (900).
Oppsummer definisjonene
I sammenheng med skriftdefinisjoner spiller også egenskapen line-height en viktig rolle, som definerer høyden på linjene. Jeg vil senere komme tilbake til denne egenskapen mer detaljert. På dette tidspunktet må den bare nevnes, siden den har en viss betydning i sammenheng med den etterfølgende font-egenskapen som blir vist.
Dere kan kombinere de tidligere presenterte opplysningene om skriftutforming. Dette gjøres ved hjelp av den generelle font-egenskapen. Den inkluderer følgende individuelle opplysninger eller inkluderer dem.
• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family
Med font kan forskjellige skriftformateringer kombineres. Her kan dere oppgi de nevnte egenskapene, men det er ikke nødvendig å bruke alle. Det obligatoriske er imidlertid egenskapene for skriftstørrelse og skriftfamilie.
Takket være kortskrivemetoden kan CSS-filene være kortere og mer oversiktlige.
Rekkefølgen, som blir vist nedenfor, må imidlertid følges. Hvis de to egenskapene font-size og line-height oppgis, må disse skilles med en skråstrek. Hvis det kun oppgis én verdi på dette stedet, gjelder dette for font-size.
Et eksempel:
p {
font: kursiv små bokstaver fet 1.3em/1.5em Georgia,Times,serif;
}font-size-adjust ble utviklet for å kunne vise skrifter omtrent med samme størrelse. Forskjellige skrifter har forskjellige x-høyder selv med samme skriftstørrelse. Imidlertid er skrifttyper med større x-høyde lettere å lese. Dermed kan det skje at et dokument blir vanskelig å lese hvis den opprinnelige skrifttypen ikke er tilgjengelig og blir erstattet av en annen med en mindre x-høyde. Med font-size-adjust skal denne forskjellen kunne utjevnes.
Et eksempel:
h1 {
font-family: Verdana,
'Times New Roman', 'Courier New';
font-size-adjust: 0.61;
}
I neste veiledning vil dere lære om flere muligheter til å tilpasse skriftbildet på nettsiden deres.
