Om man vill använda sig av ett speciellt teckensnitt och bestämma hur det ska se ut, finns det en del olika egenskaper och värden man kan använda sig av.
Med font-family bestämmer man vilket teckensnitt texten ska ha. Det finns två olika sätt att ange teckensnittet, <family-name> och <generic-family>. Med det första sättet, family-name, på svenska kan man säga familje-namn, anger man vilket specifikt teckensnitt man vill använda sig av. Exempel på familje-namn är Arial, Times new roman, Baskerville o.s.v. Det andra sättet, generic-family, på svenska kan man säga generiska familjen, använder man sig av som ett sista altenativ. Det kan vara så att besökaren på din sida inte har det specifika typsnittet som du har angett installerat på sin dator. Med ett generiskt familje-namn kan du då få besökarens dator att använda sig av ett teckensnitt som liknar det du hade angett med familjenamnet.
Det kan också vara så att du använder dig av tecken som det teckensnittet som du vill ha för att visa texten inte innehåller alla tecken som du vill visa i dokumentet. Till exempel kan du ha en text som innehåller ord blandade med matematiska symboler, som det teckensnittet du valt för att visa orden inte klarar av att visa. Du kan då behöva visa två teckensnitt, ett för bokstäverna och ett för de matematiska symbolerna. Med font-family kan författaren specifera en lista av teckensnitt, alla i samma stil och storlek, som prövas i ordningsföljd om de innehåller det tecken man vill visa. Listan kallas för font set. Ett exempel:
P { font-family: Baskerville, Symbol, serif }
Här kommer bokstäverna i texten att tas från teckensnittet "Baskerville" (ett teckensnitt som bara kan visa latinska bokstäver). De matematiska symbolerna kommer att hämtas från teckensnittet "Symbol". Alla andra tecken kommer att tas från den generiska familjen 'serif'. De olika teckensnitts-alternativen ska man skilja på med kommatecken och typsnitt som innehåller mellanslag bör man omge med citationstecken, annars ignorerar webbläsaren alla ord utom själva fontnamnet, här nedan kan se exempel på Times new roman, först för sidhuvudet:
P { font-family: "Times new roman", Bodoni, serif }
eller för enskilda stycken:
<P STYLE="font-family: 'Times new roman', Bodoni, serif">
De olika generiska familjerna som finns definerade är följande:
serif (Times new roman, Bodoni, Garamond,
sans-serif (MS Treubchet, MS Arial, MS
Verdana, Futura, Gill Sans, Helvetica)
cursive (Calfish Script, Sanvito, Snell
Roundhand, Zapf-Chancery
fantasy (Critter, Cottonwood, Studz)
monospace (Courier, Prestige)
Med denna egenskap bestämmer man om teckensnittet skall visas normalt, kursivt eller lutande. Värdena som egenskapen kan ha är:
| normal | Specifierar ett teckensnitt som är normalt. |
| oblique | Specifierar ett teckensnitt som är 'lutande (oblique)'. Teckensnitt med Oblique, Slanted, eller Incline i sina namn kommer att få etiketten 'oblique'. |
| italic | Specieferar ett teckensnitt som klassiferas som 'kursiv (italic)', eller, om någon sådan inte är tillgänglig, en med ettiketten 'oblique'. Teckensnitt med Italic, Cursive eller Kursiv i sina namn kommer att få ettiketten 'italic'. |
<P STYLE="{ font-family: 'Gill Sans', sans-serif font-style: italic">
Här ser man teckensnittet Gill Sans, med teckenstilen 'italic'.</P>
Här ser man teckensnittet Gill Sans, med teckenstilen 'italic'.
Den här egenskapen kan ha värdena 'normal' och 'small-caps'. Värdet 'small-caps' gör att de gemenerna (små bokstäverna) ska ersättas med versaler (stora bokstäver), av en mindre storlek än vanliga versaler. Om man använder detta värde skall webbläsaren ersätta det vanliga teckensnittet (om den saknar small-caps) med ett speciellt small-caps-teckensnitt. Om en sådant teckensnitt saknas ska webbläsaren simulera ett small-caps-teckensnitt, genom att använda sig av ett vanligt teckensnitt och ersätta små bokstäver med stora bokstäver i en mindre storlek. Man kan även med hjälp av font-family ange ett specifikt teckensnitt och få webbläsaren att simulera det till ett small-caps-teckensnitt.
<P STYLE="{ font-family: 'Times new roman', sans-serif; font-variant: small-caps }">
Det här är teckensnittet Times New Roman skrivet med small-caps.</P>
Det här är teckensnittet Times New Roman skrivet med small-caps.
Än så länge verkar denna egenskap göra att dom små bokstäverna omvandlas till stora bokstäver med samma storlek som de stora bokstäverna. Men det är väl meningen att det ska se ut på följande sätt:
DET HÄR ÄR TECKENSNITTET TIMES NEW ROMAN SKRIVET MED SMALL-CAPS.
Den här egenskapen bestämmer tjockleken på texten. Den här egenskapen kan ha värdena 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'. Dessa är nyckelord. Normal motsvaras av 400 och bold av 700. Bolder och lighter väljer ett teckensnitt som står i proportion till vad som är normalt. I teorin finns det alltså nio grader av tjocklek på texten i CSS, men i praktiken kan man använda två eller tre av dem. Om du har en text som är skriven i fetstil kan du göra den tjockare eller tunnare där du vill.
<P STYLE="{ font-family: Arial, sans-serif; font-weight: bold }">
Den här texten texten är skriven i fetstil,
<SPAN STYLE="{ font-weight: bolder }">
men här är den fetare med hjälp av bolder,
</SPAN> <SPAN STYLE="{ font-weight: lighter }">
här blir den tunnare med hjälp av lighter</SPAN>
och här är den tillbaka i den tjocklek den hade från början.</P>
Den här texten texten är skriven i fetstil, men här är den fetare med hjälp av bolder, här blir den tunnare med hjälp av lighter och här är den tillbaka i den tjocklek den hade från början.
Med den här egenskapen bestämmer du storleken på ett visst teckensnitt. Det finns fyra olika varianter med vilka du kan ange teckenstorleken på nämligen, absolut storlek, relativ storlek, längd och procent.
Absolut storlek
Det vanligaste när man anger teckenstorleken är att ange den i punkter (pt). Exempel
P { font-size: 12pt }
Men man kan även ange storleken med mm (millimeter), cm (centimeter), in (inches d.v.s tum, pc (pica) och px (pixlar). Det finns även ett antal nyckelord man kan använda sig av och dessa är xx-small, x-small, small, medium, large, x-large och xx-large. Man kan ange en ursprunglig tecken storlek och sedan ändra den för vissa stycken. Exempelvis så här:
<P STYLE="{ font-family: Arial, sans-serif; font-size: 14pt }">Ursprunglig 14 punkters
storlek, <SPAN STYLE="{ font-size: xx-small }"></SPAN>...</P>
I CCS2 används en skal-faktor på 1.2 mellan de olika värdena. Detta innebär ifall ett 'medium'-teckesnitt är 14pt, blir det med 'large' 16,8pt. De olika värdena kan se ut på detta sätt:
Ursprunglig 14 punkters storlek Arial, xx-small 8,10pt, x-small 9,72pt, small 11,67pt, medium 14pt, large 16,8pt, x-large 20,16pt, xx-large 24,19pt.
Relativ storlek
Man kan också använda sig av relativ storlek. De nyckelord man kan använda sig av här är larger
och smaller. Exempel:
Ursprunglig 14 punkters storlek Arial, larger, smaller.
Procent
Man kan ange storleken i procent av den storlek man använder. Exempel:
<P STYLE="{ font-family: Arial, sans-serif; font-size: 14pt }">Ursprunglig 14 punkters
storlek Arial, <SPAN STYLE="{ font-size: 70% }">70 procents storlek,</SPAN>
<SPAN STYLE="{ font-size: 150% }">150 procents storlek.</SPAN></P>
Så här ser det ut:
Ursprunglig 14 punkters storlek Arial, 70 procents storlek, 150 procents storlek.
Med en här egenskapen ska man kunna välja en normal, ihopträngd (condensed), eller utvidgad (extended) teckensnitt från en teckensnitts familj, Egenskapen kan ha följande värden: normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded och ultra-expanded. Dessa absoluta nyckelord har följande rangordning från den smalaste till den vidaste:
Denna egenskap är ett kortnamn för de olika font-egenskaperna. Man skiljer de olika egenskaperna åt med / (slash). Deklarationerna skiljer man åt med ; (semikolon). Värden som inte är nyckelord skiljs åt med , (komma). Exempel:
P { font: 10pt/12pt Times, serif }
P { font: 70% italic x-large Arial, sans-serif }
Klicka på knapparna för att backa tillbaka eller för att läsa vidare om HTML-guiden.
Denna sida är skriven av Robert Karlsson.
E-post: karlsson.robert@vetlanda.mail.telia.com
Hemsida: http://w1.383.telia.com/~u38302477
Sidan uppdaterades senast:
© Copyright 1999