Tekst - CSS

Lær at bestemme udseendet på tekst med CSS font-family, font-size, font-weight, font-style, text-shadow og text-overflow

font-family

font-family bruges til at vælge en bestemt font eller en familie af fonte.

Skrifttype-navne med mellemrum som courier new skal have anførselstegn omkring sig (') eller (").

Angiver man en kommasepareret liste af fonte så vil browseren vælger den første font som findes på systemet.

Forskellige systemer som Windows, Linux, Mac OS har ikke altid de samme fonte så ved at angive en liste af fonte kan browseren vælge en font der minder om den man præcist kunne tænke sig.

Navne som verdana, courier new og arial er skrifttype-navne der angiver en bestemt font.
Navne som monospace, serif og sans-serif er skrtiftype-familienavne der angiver en familie af fonte der har samme egenskaber.
Her er noget tekst med verdana
Her er noget tekst med impact
Her er noget tekst med helvetica
Her er noget tekst med consolas
Her er noget tekst med monospace
Her er noget tekst med serif
Her er noget tekst med sans-serif
Her er noget tekst med 'courier new'
Her er noget tekst med consolas eller monospace
Her er noget tekst med arial, helvetica, 'times new roman', times, 'courier new' eller courier
Resultatet ovenfor er skabt af følgende kode

font-size

font-size bruges til at vælge fontens størrelse.
Her er noget tekst med 8px
Her er noget tekst med 10px
Her er noget tekst med 12px
Her er noget tekst med 8pt
Her er noget tekst med 10pt
Her er noget tekst med 12pt
Her er noget tekst med 50%
Her er noget tekst med 200%
Her er noget tekst med 0.5em
Her er noget tekst med 2em
Her er noget tekst med xx-small
Her er noget tekst med x-small
Her er noget tekst med small
Her er noget tekst med medium
Her er noget tekst med large
Her er noget tekst med x-large
Her er noget tekst med xx-large
Resultatet ovenfor er skabt af følgende kode

font-weight

font-weight bruges til at vælge fontens tykkelse.
Her er noget tekst med bold
Her er noget tekst med normal
Resultatet ovenfor er skabt af følgende kode

font-style og mere

font-style bruges til at vælge fontens stil.
Her er noget tekst med font-style: italic
Her er noget tekst med font-style: normal
Her er noget tekst med font-variant: normal
Her er noget tekst med font-variant: small-caps
Her er noget tekst med font-strecth: 10px
Her er noget tekst med font-strecth: normal
Her er noget tekst med text-indent: 1em
Her er noget tekst med text-indent: 100px
Her er noget tekst med text-decoration: underline
Her er noget tekst med text-decoration: line-through
Her er noget tekst med text-decoration: none
Her er noget tekst med line-height: 2em
Her er noget tekst med line-height: normal
Her er noget tekst med letter-spacing: normal
Her er noget tekst med letter-spacing: 2em
Her er noget tekst med word-spacing: 3em
Resultatet ovenfor er skabt af følgende kode

text-shadow

text-shadow bruges til at give teksten skygge.
text-shadow
text-shadow
text-shadow
text-shadow
text-shadow
text-shadow
text-shadow
text-shadow
text-shadow
text-shadow
text-shadow
text-shadow
text-shadow
text-shadow
Resultatet ovenfor er skabt af følgende kode

text-overflow

text-overflow bruges til at bestemme hvordan teksten skal ende når der ikke er plads nok til at vise hele teksten.
Der var engang en lille gris, der gik og gik og gik
Der var engang en lille gris, der gik og gik og gik
Der var engang en lille gris, der gik og gik og gik
Der var engang en lille gris, der gik og gik og gik
Resultatet ovenfor er skabt af følgende kode

@font-face

@font-face bruges til at vælge en font fra en fil man uploader til sin hjemmeside.

Det fungere ikke lige så hurtigt som systemets indbyggede fonte da font filerne først skal downloade og det kan give et hop i teksten når siden indlæses men det giver mulighed for at få bruge nogen anderledes og spændende fonte som man tidligere ville skulle lave i et tegneprogram og gemme som et billede.

Der findes nogen forskellige formater. EOT, WOFF, TTF, SVG som jeg endnu ikke har styr på.
Her er noget tekst med Undercover
Her er noget tekst med Digitaldream
Her er noget tekst med PlexifontBV
Her er noget tekst med Open Sans
Resultatet ovenfor er skabt af følgende kode

@FONT-FACE OPEN SANS DEMO
Browserunderstøttelse fra caniuse.com :

:first-letter

first-letter bruges til at bestemme udseendet på det første bogstav i et element.
der var engang...
Resultatet ovenfor er skabt af følgende kode

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.