CSS og skrift

Med css har du ein heilt annan kontroll med skrifta og skrifttypane enn i rein html. Alle eigenskapane som har med skrift å gjere byrjar på font-:

Først litt om skrifttypar (fonts)

Til vanleg skil vi mellom hovudtypane

Serif	Sans serif	Monotype (skrivemaskintype)	Kursiv

men det finst fleire. Serif -typane har «føtter», dvs. små tverrstrekar på linjeendingane. Sans serif («utan føtter») manglar desse tverrstrekane. I dei fleste handbøkene heiter det at som oftast er sans serif betre å lese på skjermen enn serif. Med dagens høgoppløyselege skjermar er dette mindre viktig, men likevel ikkje heilt uvesentleg.

I familien monotype tar alle bokstavane og andre teikn like mykje plass. Dette er som når du bruker skrivemaskin eller fjernskrivar, dersom noen hugsar desse.

font-eigenskapane

font-family

Her bestemmer du skrifttypen som skal brukast. Det finst svært mange å velje mellom, noen nokså vanlege, andre heller sjeldne. Eksempel på nokså vanlege skrifttypar er Times, Helvetica, Arial og Courier.

Ikkje alle som les nettsidene dine har dei same skrifttypane installerte i maskinen som du har. Du kan då  spesifisera kva gruppe skrifttypen skal hentast frå. Dette kan vere serif, sans-serif, cursive eller monospace. Det finst også eit par andre, men desse blir ikkje støtta av alle nettlesarane og er ikkje relevante her. Når du spesifiserer ein fontfamilie, vil nettlesaren finne fram til ein skrifttype innan den spesifiserte familien som liknar på den du spesifiserte først og bruke denne. Vil du at mottakaren skal sjå skrifta i sans-serif, vel du denne familien. Kva skrift som blir brukt er altså avhengig av kva som er installert hos mottakaren.

Kanskje enklare med eit eksempel

Du reknar med at alle har skrifttypen Arial, men føyer til Helvetica som ei god erstatning dersom Arial ikkje er installert. Skulle også denne mangle, vil mottakarmaskinen prøve «Lucida Sans». Finst ingen av desse, blir ein eller annan skrifttype innan familien sans-serif brukt. Kommandoen vil då sjå slik ut:

Merk at her skal det vere komma mellom orda i opplistinga. Dersom skriftnamnet inneheld fleire or, må desse samlast mellom  "hermeteikn" eller 'enkelt hermeteikn' dersom kommandoen er skriven inline i html-kode.

Til font-family høyrer også «fantasy». Dette er skrifttypar som ikkje passar inn i dei andre gruppene. Fantasy blir ikkje oppfatta av alle nettlesarane.

font-style

Her har du tre val: normal, italic og oblique. Valet normal betyr at skrifta blir vist normalt, altså slik ho er definert i skrifttypen. italic er det vi kallar kursiv, altså at bokstavane skrånar mot høgre. oblique er nokså lik italic, og blir ikkje støtta av alle nettlesarane. Bør altså ikkje brukast.

font-variant

Utanom valet normal kan du her også velje small-caps. Denne kommandoen gjer at skrifta kjem ut som små versalar (store bokstavar).

(Du har fleire val med kommandoen text-transform. Sjå nedanfor).

font-weight

Dette er kor «feite» bokstavane skal vere. Normalt er vel bold den mest brukte. Tala refererer til ein relativ skala der 400 tilsvarer normal og 700 bold. I utlistinga nedanfor er alle kommandoane i font-weight brukte. Studer korleis dei tar seg ut i nettlesaren du bruker.

normal - lighter - bold - bolder - 100 - 200 - 300 - 400 - 500 - 600 - 700 - 800 - 900

font-size

Her bestemmer du kor stor skrifta skal visast på skjermen. Storleiken kan bestemmast relativt til normalskrifta eller absolutt. Absolutt storleik set teksten til ein bestemt storleik uavhengig av kva brukaren ønskjer. Storleiken blir bestemt av skjermoppløysinga, ikkje av brukaren. Er storleiken bestemt relativt, vil brukaren kunne forandre storleiken. Ein del brukarar har t.d. nedsett syn og har for vane å vise skjermen i forstørra skrift. Relativ storleik er altså for desse brukarane normalt det beste valet.

Så langt er det enkelt. Men diverre definerer dei ulike nettlesarane litt forskjellig kva som er absolutt og kva som er relativ storleik.

Dette er skrive ut med style="font-size:10px" og blir i Internet Explorer oppfatta som absolutt storleik. I dei fleste andre nettlesarane som relativ.

Måleeiningane

Måleeiningane brukte for å bestemme skriftstorleiken er dei sam måleeiningane som blir brukte elles i CSS alle stader der det er snakk om høgde og/eller breidde. Difor passar det å ta litt meir om dette nå.

I dei fleste nettlesarane blir px oppfatta som relativ storleik, men ikkje i Internet Explorer. Dersom brukaren skal kunne forstørre eller forminske skjermvisinga, bør ein ikkje bruke px. Dei andre måleeiningane uttrykker storleiken i forhold til normalstorleiken. 1em er normal storleik, 0.9em er litt mindre enn normalt, medan 2em er dobbelt så stor. Legg merke til at desimalteiknet er punktum, ikkje komma.

Her er lista over «måleeiningar» som kan brukast i CSS:

Du kan sjå verknaden i nettlesaren din ved å studere eksempla nedanfor.

xx-small - x-small - smaller - small - normal - large - larger - x-large - xx-large

Her er brukt 0.7em, medan dette er med 1em og dette er med 1.5em.

Her er brukt 70%, medan dette er med 100% og dette er med 150%.

Her er brukt 2ex, medan dette er med 2.5ex og dette er med 3ex.

Her er brukt 12px, medan dette er med 18px og dette er med 24px.

Du kan prøve å forstørre og forminske tekstvisinga av denne sida for å sjå om nettlesaren du bruker oppfattar dei ulike måleeiningane som relative eller absolutte.

Tekst

Når ein først er i gang med skrifttypane, kan det høve godt å ta med også kommandoen text. Denne styrer tekstdekorasjon, bokstavavstand og innretting av teksten.

Dekorasjon

Verdiane skulle vere nokså sjølvforklarande:

Den vanlegast bruken av desse eigenskapane er faktisk for å fjerne understrekinga av lenker. Blinkande tekst er som oftast irriterande for lesaren, men kan vere nyttig ein gong i blant

normal lenke i html    lenke utan understreking

text-indent

Dette er den greiaste måten å lage innrykk i teksten på. Du har sikkert oppdaga at dersom du set inn mange mellomrom etter kvarandre i ein tekst, vil nettlesaren redusere desse til eitt mellomrom. Løysinga har vore å setje inn  . Med stilark kan du bestemme innrykket direkte.

I det første eksemplet vil alle avsnitta byrje 2 gonger vanleg bokstavbreidde inn på linja. I det andre eksemplet vil innrykket vere på 20 pikslar. Dette er til vanleg eit nokså lesbart innrykk. Prosent bør helst ikkje brukast då det kan skape rot i layouten dersom skjermstorleiken avvik mykje frå den du har laga sidene for.

Innrykket er her sett til 20px

Her er det sett til 1em

og her til 20%

text-shadow

Denne verkar bare med noen få nettlesarar. Bør av den grunn helst ikkje brukast.

Denne teksten er sett med blå skygge. Ser du han?

text-transform

text-transform:

I tillegg kan du også bruke

Tekstjustering

Tekst kan plasserast venstrestilt, midtstilt, høgrestilt og blokkjustert. Dette er det same som align="left" osv. i html. I CSS bruker vi

text-align:

Denne kommandoen kan ikkje brukast inline. Bare i blokkelement som t.d. <p>, <h1>, <ul> og noen til.

I kategorien for tekstlayout finn vi også

word-spacing

som blir brukt til å bestemme avstanden mellom orda. Verdien du bruker blir lagt til, eller trukke frå dersom han er negativ, den normale verdien for det aktuelle teiknsettet. Du kan bruke alle lengdeeiningar, men bør som tidlegare nemnd, bruke em.

Eksempel:

Den siste (p em) gjer at all utheva skrift inne i ein <p>-tagg blir sett med ein avstand mellom orda på normalavstanden + 0.3em. I p.merknad vil orda bli klemt saman.

Her er det brukt normal ordavstand

Her er det brukt word-spacing: 0.2em.

letter-spacing

Verkar på same måten som word-spacing, men bestemmer avstanden mellom skriftteikna.

Her er det brukt normal teiknavstand.

Her er det brukt letter-spacing: 0.2em. Her er det brukt letter-spacing: -0.1em.

white-space

Denne styrer mellomromma («white spaces») mellom bokstavane.

Med innstillinga normal blir mellomromma handterte slik du er van med i html, altså at fleire mellomrom etter kvarandre blir viste som eitt mellomrom. Med verdien pre blir også dei ekstra mellomromma viste. Du slepp altså å setje inn &nbsp; i teksten. Med nowrap blir ikkje linja broten til ei ny linje før det møter taggen <br>.

line-height

Normalt tilpassar linjehøgda seg automatisk etter bokstavhøgda, men har du bruk for andre linjeavstandar er dette ingen problem med CSS. Verdien kan vere normal eller ei måleeining.

Same skrift i alle nettlesarane

Det kan vere eit problem at dei perfekt formaterte sidene dine likevel ikkje blir viste likt i alle nettlesarane. Normalskrifta er ikkje like stor i alle operativsystema og skjermane. Dersom brukaren vel å forstørre eller forminske skrifta, kan dette også føre til problem. Såleis har Internet Explorer mykje større sprang mellom visingsstorleikane enn dei andre nettlesarane. Du kan unngå noe av dette ved å setje normalskrifta til 100% i <body>-taggen og deretter definere alle skriftstorleikane relative til denne med måleeininga em.

Eksempel