HOME -> CSS_TUTORIAL -> css-06 Onsdag, 13. December 2017

HOME
FORUM
OPEN DIRECTORY
BOOKMARK
Offentliggjort 2002 - Opdateret n/a

CSS lektion 06

Denne lektion omhandler fonte

Indhold

 

TopFont-family
family-name (font)
I daglig tale blot "font", er den skrifttype man ønsker at anvende, det kunne være Arial, Times New Roman, Helvetica eller Baskerville.
generic-family
Generic-family er en gruppe af skrifttyper med et ensartet udseende.
Det er en god ide at angive den generiske familie type som en alternativ mulighed. Dette kommer en til gode, i det tilfælde hvor der på klient siden ikke forefindes den ønskede skrifttype. Her er nogle eksempler på generic-family:

serif: Times New Roman, MS Georgia, Garamond.

sans-serif: Arial, Helvetica, Trebuchet, Verdana, Futura, Gill Sans.

cursive: Zapf-Chancery, Caflisch Script.

fantasy: Critter, Cottonwood, Western.

monospace: Courier, MS Courier New, Prestige, Andele Mono.

Man kan angive font-family som f.eks.:


p {font-family: Times, "New Century Schoolbook", serif;}


Som det kan ses, kan man angive flere parametre adskilt med komma. I eksemplet vil browseren starte med at lede efter skrifttypen Times. Skulle denne skrifttype af en eller anden årsag ikke være tilstede, vil den næste i rækken blive kaldt, i dette tilfælde er det New Century Schoolbook. Skulle man være så uheldig at ingen af de to skrifttyper er tilstede på klientens pc, vil browseren tage en ud fra den generiske familie Serif. Læg mærke til at New Century Schoolbook er angivet med citationstegn, dette gøres pga. mellemrum mellem ordene.
TopFont-size
Via font-size har du mulighed for at justere tekst størrelsen. Dette kan gøres på mange forskellige måder. De mest almindelige værdier angives i px, % eller em.


p {font-size:11px;}
h6 {font-size:1cm;}
h5 {font-size:2ex;}
h4 {font-size:20pt;}
h3 {font-size:1pc;}
h2 {font-size:1,1em;}

/* Gemmes som size.css */



<html>
<head>
<title>Font-size</title>
<link rel="stylesheet" type="text/css" href="size.css" />
</head>
<body>
<p>Denne tekst er skrevet med 11px.</p>
<h6>Denne tekst er skrevet med 1cm.</h6>
<h5>Denne tekst er skrevet med 2ex.</h5>
<h4>Denne tekst er skrevet med 20pt.</h4>
<h3>Denne tekst er skrevet med 1pc.</h3>
<h2>Denne tekst er skrevet med 1,1em.</h2>
<small>Dette er skrevet med small</small>
<big>Dette er skrevet med big</big>
</body>
</html>


Vis som eksempel

length:

Følgende relative værdier er mulig:

  • em (ems)
  • ex (x-height)
Følgende absolutte værdier er mulig:

  • px (pixels)
  • in (inches; 1in=2.54cm)
  • cm (centimeter; 1cm=10mm)
  • mm (millimeter)
  • pt (points; 1pt=1/72in=1/12 Pica)
  • pc (picas; 1pc=12pt)
Procent:
  • % (procent)

TopFont-style
Font-style giver dig følgende muligheder:
normal | italic | oblique

Både oblique og italic er i kursiv form.



p {font-style: normal;}
h6 {font-style: oblique;}
h5 {font-style: italic;}

/* Gem dette stylesheet som style.css */



<html>
<head>
<title>Font-style</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p>Denne tekst er skrevet med normal font-style.</p>
<h6>Denne tekst er skrevet med font-style oblique.</h6>
<h5>Denne tekst er skrevet med font-style italic.</h5>
</body>
</html>


Vis som eksempel

TopFont-variant
Font-varianten afgør om fonten skal vises normal eller i small-caps. Small-caps anvender store bogstaver i mindre udgave, prøv at se på eksemplet.


span {font-variant: small-caps;}
h3 {font-variant: small-caps;}

/* Gem dette stylesheet som variant.css */



<html>
<head>
<title>Font-variant</title>
<link rel="stylesheet" type="text/css" href="variant.css" />
</head>
<body>
<p>De tryllebundne <span>tilskuere, Carters medhjælpere</span> og de to andre <span>anatomiprofessorer</span> der var blevet tilkald for at foretage en undersøgelse af mumien, kunne ikke ....</p>
<h3>De tryllebundne tilskuere, Carters medhjælpere og de to andre anatomiprofessorer der var blevet tilkald for at foretage en undersøgelse af mumien, kunne ikke ....</h3>
</body>
</html>


Vis som eksempel

TopFont-weight
Font-weight egenskaben anvendes til at definere, hvor fed skriften skal være. Her er der en del muligheder:
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900



h1 {font-weight: 200;}
p {font-weight: 800;}

/* Gem dette stylesheet som weight.css */



<html>
<head>
<title>Font-weight</title>
<link rel="stylesheet" type="text/css" href="weight.css" />
</head>
<body>
<h1>Overskrift</h1>
<p>De tryllebundne tilskuere, Carters medhjælpere og de to andre anatomiprofessorer der var blevet tilkald for at foretage en undersøgelse af mumien, kunne ikke ....</p>
</body>
</html>


Vis som eksempel

TopSammenskrivning af font
Font-family, size, style, variant, og weight kan for at gøre det hele lidt mere overskuelig skrives sammen under betegnelsen font.


p {
font-style: italic;
font-weight: bold;
font-size: 1em;
font-family: Times, "New Century Schoolbook", serif;
}


Alt dette kan sammenskrives til følgende:


p {
font: italic bold 1em Times, "New Century Schoolbook", serif;
}



OBS!!! Det er vigtig at du sammenskriver font egenskaber i følgende rækkefølge:
[Font-style] [-variant] [-weight] [-size] [-family]


Så meget til font. Næste lektion handler om baggrundsfarver.

BACKGROUND >>


 

Copyright © 2002 - 2017
NETeXplorer.dk · All rights reserved Top