 |
| 9.3. | Indhold | ||||
 |
9.3.1 | Skrifttyper | |||
|
9.3.2 | Valg af Skrifttype | |||
|
9.3.2.1 | Overordnede Skriftfamilier | |||
|
9.3.3 | Formatering af Skriften | |||
|
9.3.3.1 | Skråskrift | |||
|
9.3.3.2 | Kapitæler | |||
|
9.3.3.3 | Fed Skrift | |||
|
9.3.3.4 | Knibning | |||
|
9.3.4 | Skriftstørrelser | |||
|
9.3.4.1 | Angivelse af Skriftstørrelse | |||
|
9.3.4.2 | 9.3.4.2 Juster Størrelsesforhold | |||
|
9.3.5 | Den Overordnede Egenskab | |||
|
9.3.6 | Skriftfarve | |||
Nu da vi har lært noget af det grundlæggende ved brugen af typografiark, går vi videre og begynder helt forfra. Nå, ja, så næsten da.
I kapitel 3 om Formatering af Teksten var det et gennemgående træk, at [HTML40] specifikationen anbefalede at bruge typografiark i stedet for formateringselementerne - og det uanset om elementet var under afvikling eller ej. Og den anbefaling er ikke helt ved siden af, da mulidhederne ofte er mange flere.
En af de vigtigste designovervejelser er valget af skrifttypen til hjemmesiden. Hvor én skrifttype kan sidde lige i øjet, får en anden måske siden til at ligne noget, som katten har slæbt med ind. I et godt design hjælper den eller de valgte skrifttyper med til at understrege sidens tema. Gotiske skrifttegn er således velgenede til sider, som beskæftiger sig med middelalderen på en eller anden måde, mens de er meget lidt velegnede til tekniske beskrivelser (for at sige det mildt).
Den egenskab, som styrer valg af skrifttypen, hedder "font-family". Til alt held er det en egenskab, der nedarves, så man kun behøver at knytte den til selektoren BODY for at få den samme skrifttype på hele siden. "font-family" kan naturligvis anvendes på alle elementer i HTML-dokumentet.
Egenskaben kan få to typer værdier:
Angiver man navnet på en skrifttype, vil browseren anvende denne skrifttype, hvis den findes på klienten. Hvis ikke vil browseren springe værdien over og gå videre til den næste i rækken. Er der ikke angivet flere værdier, anvender browseren sin standard skrifttype. Det er derfor en særdeles god ide at angive en række alternative værdier bestående af både skrifttyper og en eller flere overordnede familier:
BODY { font-family: "Verdana", "Arial", "Helvetica", "Swiss", sans-serif } H1 { font-family: "Times New Roman", serif }
Eksemplet er måske ikke det pæneste, men det viser, hvordan man kan angive én font-family til selve dokumentet, mens en anden anvendes til overskriften.
Det illustrerer også en ting, som varmt kan anbefales: nemlig at begynde med de mere specielle skrifttyper (Verdana), for derefter at liste en eller flere almindelige skrifter (Arial, Helvetica, Swiss) og slutte af med en overordnet familie (sans-serif).
De overordnede skriftfamilier er livremmen og selerne, der sikrer, at den oprindelige designide bevares, om end siden måske ikke vises optimalt. Derfor bør man altid afslutte en række værdier med en overordnet skriftfamilie.
De fem overordnede skriftfamilier er:
Nu da vi har sat hjemmesidens overordnede skrifttype, vil vi kigge nærmere på, hvordan vi kan formatere den ved hjælp af typografiark. Vi har flere egenskaber til vores rådighed, når vi vil give skriften det ønskede udseende.
I typografiark bruges "font-style" til at få skriften til at stå på skrå. Denne egenskab skal erstatte kursiv skrift, selv om denne endnu ikke er under afvikling i [HTML40].
"font-style" kan have følgende værdier:
Det er ikke altid, der er lige stor forskel på, om man bruger "italic" eller "oblique"
SPAN.kursiv { font-style:italic } SPAN.skraa { font-style:oblique }
som dette praktiske eksempel viser.
Egenskaben kan bruges på alle elementer og nedarves.
En egenskab med et meget sigende navn er "font-variant". Jeg mener, det er da indlysende, at den bruges til at skifte mellem almindelige, små bogstaver og kapitæler, dvs. bogstaver der ligner store bogstaver, men ikke er højere end de små bogstaver.
"font-variant" kan have følgende værdier:
Egenskaben har naturligvis ingen virkning med skrifttyper, som ikke både store og små bogstaver.
SPAN.kapitael { font-variant:small-caps }
Med denne regel kan man få en side, der ser således ud.
Indrømmet: den overskrift er lidt misvisende, selv om "font-weight" er den egenskab, som er beregnet til at sætte netop fed skrift. Det misvisende skyldes, at "font-weight" også kan gøre skriften mindre fed end normalt.
Du kan bruge følgende værdier sammen med "font-weight":
<SPAN STYLE="font-weight:lighter;">font-weight:lighter</SPAN><BR> <SPAN STYLE="font-weight:normal;">font-weight:normal</SPAN><BR> <SPAN STYLE="font-weight:bolder;">font-weight:bolder</SPAN><BR> <SPAN STYLE="font-weight:bold;">font-weight:bold</SPAN>
Det fulde eksempel er naturligvis noget mere omfattende, idet det kommer hele vejen rundt, men de små eksempler herover giver en god ide om, hvad det drejer sig om.
Indenfor bogtrykning anvendes udtrykket "at knibe teksten", når man gør den smallere eller bredere for at få pæne, lige margener uden at lave orddeling. Noget lignende kan man lave med egenskaben "font-stretch", når man bruger typorgrafiark.
Værdimæssigt er egenskaben bygget op på samme måde som "font-weight":
Bemærk: Denne egenskab ændrer kun på tekstens bredde. Skriftens højde påvirkes ikke!
<SPAN STYLE="font-stretch:narrower;">Dette er en tekst</SPAN><BR> <SPAN STYLE="font-stretch:normal;">Dette er en tekst</SPAN><BR> <SPAN STYLE="font-stretch:wider;">Dette er en tekst</SPAN>
Der viser de enkelte værdiers virkning på den samme tekst. Det fulde eksempel giver naturligvis et noget større overblik over effekten.
Der er to egenskaber, som beskæftiger sig med skriftens størrelse. Den ene sætter selve skriftstørrelsen, mens den anden bruges til at justere forholdet mellem bogstaverne. Dem vil vi se på i det efterfølgende.
Den enkleste - og også den mest brugte - af de egenskaber, der har med skriftstørrelser at gøre, er "font-size", der (surprise, surprise) bruges til at sætte skriftstørrelsen med.
Dens værdiliste består af fire typer værdier:
[CSS2] specifikationen anbefaler, at man anvender enten procentvise størrelser eller angiver størrelsen i "em", da det giver de mest robuste og kombinerbare typografiark.
H1 { font-size:125% } H1.Stor { font-size:1.5em }
Der definerer en overskrift 1, der er 25% større end den gældende skriftstørrelse, samt en speciel, stor overskrift 1, som igen er 1½ gang større end denne, altså næsten dobbelt så stor som den gældende skriftstørrelse (1,25 x 1,5). Her ser vi også hvor vigtig, reglernes rækkefølge kan være. Havde de stået omvendt, var størrelsen på den store overskrift 1 beregnet ud fra normalen, så den kun ville blive 1½ gange så stor som den gældende skrift.
Egenskabens standardværdi er "medium", og den gælder for alle elementer. Når browseren møder egenskaben, omsættes dens angivelse til en beregnet værdi, som er arvelig.
<SPAN STYLE="font-size:xx-small;">font-size:xx-small</SPAN><BR> <SPAN STYLE="font-size:medium;">font-size:medium</SPAN><BR> <SPAN STYLE="font-size:xx-large;">font-size:xx-large</SPAN>
Her ser vi, hvordan vi anvender en absolut angivelse til at ændre skriftens størrelse. Hele eksemplet viser både de ovennævnte eksempler plus en hel del mere.
Jeg ville gerne have undgået det, men nu bliver det desværre rigtigt langhåret. Beklager meget! Det kan desværre ikke undgås, så vi bliver nødt til at holde tungen lige i munden.
For alle skrifttyper gælder det, at der er et vist forhold mellem skriftstørrelsen og skrifttypens x-højde. F.eks. er det nævnte forhold for skrifttypen Verdana på 0,58,hvilket betyder, at hvis skriftstørrelsen er på 100 enheder, er Verdanas x-højde 58 enheder. For Times New Roman er den samme størrelse kun 0,46. Det medfører, at Verdana vil være læsbar i mindre skriftstørrelser end Times New Roman. På den anden side vil Verdana se alt for stor ud, hvis den blev sat ind i stedet for Times New Roman.
Det kan man lave om på med egenskaben "font-size-adjust", der giver mulighed for at bibeholde dette forhold fra det første valg i de efterfølgende, hvis det første valg ikke er tilgængeligt.
Lyder det indviklet? Det er det egentlig ikke. Holder vi os til eksemplet med Verdana og Times New Roman, kan vi lave reglen:
BODY { font-family:"Verdana","Times New Roman"; font-size-adjust:0.58 }
der ændrer forholdet mellem skriftstørrelsen og x-højden til 0,58 for Times New Roman, hvis Verdana ikke er tilgængelig. Der vil derfor ikke opstå problemer med læsbarheden af Times New Roman, selv om den kom ned i nogle små skriftstørrelser, når blot Verdana er læsbar i samme størrelse.
Meeeeen, når det så er sagt, hvem vil så bare overveje at udskifte Verdana (en sans-serif) med Times New Roman, der er en skrifttype med seriffer? Noget af et stilskift, hvis du spørger mig.
Værdierne for egenskaben er:
Det var da egentlig en forfærdelig masse egenskaber. Findes der ikke en måde, hvor man kan sætte det hele på én gang? Jo da. Den overordnede egenskab for skrifttyper hedder "font". Den kan dog ikke sætte "font-stretch" og "font-size-adjust". Disse egenskaber skal fortsat sættes særskilt.
Værdierne for de egenskaber, vi så på ovenfor, er de samme, som er anført under hver enkelt egenskab. Værdierne for hver enkelt egenskab adskilles med mellemrum og angives på samme måde som anført under egenaksben.
Når du anvender "font" som en samlende egenskab, skal du være opmærksom på, at:
Eksempler på anvendelsen af "font":
P { font: 120% "Verdana",sans-serif }
Der angiver, at afsnit skal have en skriftstørrelse på 120% af den gældende skriftstørrelse, og der skal anvendes enten Verdana eller browserens standard sans-serif font.
P { font: 120%/125% "Verdana",sans-serif }
Der har samme virkning som den første regel, men angiver desuden en liniehøjde på 125% af skriftstørrelsen.
EM { font: bold italic 12pt "Times New Roman",serif }
Denne regel angiver, at fremhævet skrift vises med fed og kursiv, har en størrelse på 12 punkter, og skal bruges skrifttypen Times New Roman eller browserens standard serif skrift.
Egenskaben "font" kan også bruges på en anden måde. Du kan nemlig tilgå brugerens egne systemindstillinger med "font". Jeg ser straks hænderne fra adskillige webudviklere på vej op i vild jubel, men slå koldt vand i blodet - meget koldt vand endda - og styr begejstringen. Som webudvikler vil jeg naturligvis også helst have fuld kontrol over alle aspekter i forbindelsen med de hjemmesider, jeg laver, men jeg surfer en hel del roligere på Internet i bevidstheden om, at en hjemmeside ikke kan pille ved min computer. Nej, du kan kun gå ind og læse visse systemindstillinger med "font" - ikke sætte dem.
Brug disse værdier til at aflæse systemindstillinger:
Et par eksempler på denne brug er:
P { font: menu } BUTTON { font: caption }
Men hør, der mangler da noget! Hvor er skriftstørrelse og -familie? I modsætning til ovenfor, hvor "font" blev anvendt som en samlende egenskab for de andre font egenskaber, skal de ikke angives, når man henter brugerens systemindstillinger. Det samme gælder naturligvis også for de andre font egenskaber, da alle disse oplysninger jo er gemt i indstillingerne i forvejen. Følgende regler er derfor nogle store "DON'T EVEN THINK ABOUT IT!"'er:
P { font: menu Verdana,sans-serif } BUTTON { font: bold caption }
Okay, der sker ikke noget ved at gøre det. Helt bogstaveligt. For browseren opfatter det som det rene vås og springer bare reglerne over uden at gøre noget som helst. Og så hænger udvikleren i en eller anden HTML-nyhedsgruppe og vræler: "Hvorfor virker mit typografiark ikke?". Men nu kender du i hvert fald grunden og kan hjælpe staklen.
Farver er altid en vigtig del af en sides design. Som standard er farverne på en hjemmeside sort tekst på en hvid baggrund, og jeg har set mange flotte hjemmesider, som anvender denne kombination, fordi det passer til sidens design.
Men prøv at åbne de fleste af mine eksempelsider, hvor jeg bevidst har udeladt stort set alt, som ikke har med det, eksemplet skal vise, at gøre. Ikke et design som vinder mange priser og anerkendelse rundt omkring. Det er helt sikkert. Og det er heller ikke meningen.
Nu skal dette ikke udvikle sig til en diskussion om, hvorfor nogle af mine sider ser ud, som de gør. Jeg fulgte bare udflugtsruten for at komme frem til, at det kan være nødvendigt at ændre på skriftens farve. Enten som en fast del af designet, eller fordi man vil bruge en anden farve for at signallere noget til læseren, som når jeg herover anvender rød skrift for at vise, at dette er eksempler på noget, man ikke skal gøre.
Langt de fleste HTML-elementer har en attribut til at sætte skriftfarven, men den er under afvikling til fordel for egenskaben "color". Egenskabens værdi er altid en farveværdi.
Farver angives altid på formen:
hvor rr, gg og bb er hexadecimale værdier mellem 0 og 255 for henholdsvis rød, grøn og blå. Ren blå angives således med:
De knap så langhårede, som ikke lige er verdensmestre i det hexadecimale talsystem, kan i stedet anvende:
hvor rr, gg og bb er almindelige, hele tal mellem 0 og 255 for henholdsvis rød, grøn og blå. Ren blå angives her med:
Et alternativ til denne metode er:
hvor rr, gg og bb er almindelige tal - gerne med decimaler - mellem 0 og 100. Vil man angive ren blå på denne måde, skal man skrive:
Endelig definerer [HTML40] specifikationen nøgleord på 16 farver, der er jævnt fordelt over hele farvespektret, og som man også kan bruge:
| Black | Maroon | Green | Olive | Navy | Purple | Teal | Silver |
| Gray | Red | Lime | Yellow | Blue | Fuchsia | Aqua | White |
så ren blå opnås også med:
Mange browsere forstår også andre farvenavne som f.eks.
| Gold |
men den er ikke officiel, så den har du ikke set herinde.
endelig vil jeg lige gøre opmærksom på den såkaldte "Netscape-palette" over "websikre" farver - farver der vises korrekt uanset browser og platform. Den består af 216 farver sammensat af værdierne 0, 51 (hex 33), 102 (hex 66), 153 (hex 99), 204 (hex CC) og 255 (hex FF) for hver af de tre farver rød, grøn og blå. Hvis det er vigtigt at hjemmesiden altid er vist med korrekte farver, skal du holde dig til disse 216.
Anvendt sammen med "color" ser det således ud:
H2 { color: #996600 } H3 { color: rgb(64, 64, 255) } H4 { color: rgb(25%, 25%, 100%) }
Et eksempel hvor du ser farverne i fuld funktion. Du lægger også mærke til, at de to nederste regler giver nøjagtigt den samme farve.
 |
 |
 |
 |
 |
