NinetNet    HTML & CSS    Teckensnitt & Färger   skriv ut  

Teckensnitt

Om teckensnitt på webben

Det här med teckensnitt på webbsidor kan vara lite knivigt...

Det är nämligen så att det teckensnitt du anger i koden måste finnas installerat på besökarens dator för att kunna visas. Därför är det bäst att använda sig av ett mycket vanligt teckensnitt.

Detta är särskilt viktigt för oss som använder de svenska tecknen: Å Ä Ö. Lite ovanligare teckensnitt är ofta anpassade för engelskan och saknar dessa tecken. De teckensnitt som ingår i windows innehåller våra tecken.

Det är också fiffigt att ange alternativa teckensnitt om det första inte skulle finnas. Särskilt viktigt är att ta med teckensnittets motsvarighet för Mac-användare och vice versa.

Vilket teckensnitt du vill använda anges med CSS i stilmallen.

Så här skriver du om du vill att texten ska vara skriven med teckensnittet "Arial" och att "Helvetica"  ska användas i andra hand:

font-family: Arial, Helvetica;

Följande teckensnitt finns på de flesta PC's: - ( Mac-alternativ inom parentes )

De här kan man också någorlunda tryggt använda:

De här är populära på webbsidor och många har dem installerade:

De här är mer ovanliga men används en del som förstahands-alternativ ändå:

Här finns en lista över de teckensnitt som hänger med som standard i olika versioner av Windows: Standard Windows Fonts - sidan öppnas i nytt fönster!

Serif eller Sans-serif

Vad är nu det här? Jo, "seriffer" är de där små "fötterna" som finns på en del teckensnitt - som till exempel: Times New Roman.

Ursprungligen uppfanns de här fötterna för att det skulle vara lättare följa raderna när man läser tryckt text.

Hur som helst brukar man som "slutkläm" när man anger teckensnitt ange antingen serif eller sans-serif = utan serif.

Om besökaren inte har något av de teckensnitt du föreslår installerade - kommer teckensnittet i alla fall att ersättas av ett som är av samma "fot-familj"...

Exempel 1:

font-family: Verdana, Geneva, sans-serif;

Ser ut så här:

Exempel 2:

font-family: "Times New Roman", Times, serif;

Ser ut så här:

Välj teckensnitt

När du väljer teckensnitt och alternativ för din sida är det smart de alla liknar varandra. Teckensnitt har olika bredd på bokstäver och olika storlek på mellanrummen...

Om ditt alternativa teckensnitt är alltför olikt ditt första alternativ kan din sida se HELKONSTIG ut för en del besökare.

Det är smart att börja med det teckensnitt som är mer ovanligt och sedan som alternativ övergå till såna som besökarna med all sannolikhet har installerade.

Det lönar sig inte ett dugg att vara alltför originell!

Det här är en MYCKET vanlig kombination på webbsidor - som fungerar bra:

font-family: Verdana, Arial, Helvetica, sans-serif;

 Till Toppen 

Färger

De färger som förekommer på en webbsida anges antingen med hexadecimal färgkod eller med färgnamn. Hexadecimal kod är säkrast och ger flest valmöjligheter.

Vill man vara på den absolut säkra sidan bör man hålla sig till de 216 webbsäkra färgerna. Detta för att färgerna ska kunna visas även på bildskärmar med 256 färger.

Så här skriver du med css-kod för att ange färg på text. I det här fallet svart text.

color: black;

Svart text med hexadecimal kod (sex nollor):

color: #000000;

Vill du ange bakgrundsfärg - i det här fallet vit - ser det i stället ut så här:

background-color: white;

background-color: #FFFFFF;

Det spelar ingen roll om den hexadecimala koden skrivs med stora eller små bokstäver! Här används stora för tydlighetens skull.

Nedan listas de 16 namngivna färger som har funkat på webben sedan urminnes tider - och motsvarande hexadecimala kod:

Observera att den grå färgen ovan heter gray och inte grey som man ev. skulle kunna tro... Varför? Det skrivs så på Amerikansk engelska! Lite onödigt vetande!

Alla de 216 webbsäkra färgerna hittar du under rubriken: HTML / Färgkoder.

 Till Toppen 

Exempel

Så här går det till att förändra teckensnitt och färger i en stilmall. Vi utgår från den stilmall som skapades på föregående sida.

Så här ser det ut från början:

body {
padding: 0; margin: 0;
margin-top: 20px; margin-left: 30px;
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
color: darkslategray;
background-color: cadetblue;
background-image: url();
background-repeat: repeat;
}

h1 {
font-family: "Times New Roman", serif;
}

Genom att förändra teckensnitt och färger inom klamrarna med body som selector förändras det övergripande utseendet på hela webbsidan.

Genom att förändra teckensnittet och lägga till text-färg inom klamrarna med h1 som selector förändras utseendet på rubriker som skrivits mellan <h1> och </h1>.

Så här:

body {
padding: 0; margin: 0;
margin-top: 20px; margin-left: 30px;
font-size: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #664714;
background-color: #FBFBA4;
background-image: url();
background-repeat: repeat;
}

h1 {
font-family: Georgia, "Times New Roman", serif;
color: #D9B427;
}

Observera att teckensnitt som innehåller fler än ett ord ska infogas med fnuttar runtomkring. Så här: "Times New Roman"

Här kan du testa hur själva html-sidan som skapades på föregående sida ser ut med den nya formateringen i stilmallen - öppnas i ett nytt fönster!

Om du händelsevis inte gillar mina färgkombinationer och vill återställa färgerna till det som är standard i de flesta webbläsare - nämligen svart text på vit botten går det finfint.

Så här:

body {
padding: 0; margin: 0;
margin-top: 20px; margin-left: 30px;
font-size: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background-color: #FFFFFF;
background-image: url();
background-repeat: repeat;
}

h1 {
font-family: Georgia, "Times New Roman", serif;
color: #000000;
}

Här kan du testa hur det ser ut - öppnas i ett nytt fönster!

 Till Toppen 

Avslutningsvis

Då har du fått en första inblick i hur det går till att ange teckensnitt och färger.

Vandra vidare i guiderna under rubriken HTML & CSS!

På nästa sida beskrivs hur man infogar de viktigaste meta-taggarna - som bör finnas med på varje webbsida.

Läs vidare om hur HTML-kod är uppbyggd i HTML-guiden.

Läs vidare om hur CSS-kod fungerar i CSS-guiden.