I sist innlegg lovet eg å skrive et innlegg om CSS og fonter.
Den siste CSS standarden heter CSS3, og det er denne eg har tatt utgangspunkt i når eg skriver dette innlegget.
Som alltid så refererer eg til www.w3schools.com sine sider.
Og linken til CSS3 er: http://www.w3schools.com/css3/default.asp
Om du har brukt CSS til å behandle font tidligere så er det kanskje noen nye ting å lære seg.
Det fine med CSS3 kontra det som tidligere har vært tilfelle er at man no kan bruke hvilken font man ønsker.
Hver oppmerksom på at det ikke er alle browsere (nettlesere) som støtter det samme, derfor vil det i eksemplene bli definert på en måte slik at flere browsere støtter dine CSS krumspring.
Browserene det henvises oftest til er: Firefox, Chrome, Safari, Opera og Internet Explorer. Det kan kanskje være artig å se siden din i flere browsere etterhvert, så om du ikke har lastet de ned allerede kan det være greit. Om ikke annet enn for å teste noe annet enn det du vanligvis bruker.
Når det gjelder fonter finnes det flere typer. Du kan lese om de her http://www.fileinfo.com/filetypes/font
Du kan gjerne lese litt der om .ttf .otf og .eot
Til dette blogginnlegget synes eg det kan være greit å lage en ny html side og css fil. Om du velger å bruke det du har startet på går det også helt fint.
Mal:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="style.css" />
</HEAD>
<BODY>
</BODY>
</HTML>
Du må også lage style.css om du velger å begynne på nytt (legg disse to filene i en ny mappe.)
Den fonten vi skal bruke heter Sansation_Light. Om du ikke har den bør du laste den ned. Et kjapt søk på google.com gir deg muligheten til det.
Om du ikke har en winzip versjon som fungerer og ikke har lyst å kjøpe til 30 USD så går det an å laste ned alternativer. Denne gangen valgte eg å laste ned 7-zip og legge fonten i en mappe som heter 'sansation' som er en undermappe av den du har lagret siden din i.
Igjen velger eg å bruke <h4> som tag til teksten. Legg inn tekst og lukk igjen med </h4>
For å helt tydelig se forskjell så lager eg også en tekst med <h5> taggen. Husk å lukke igjen etter du har skrevet det du skal.
Min html side ble seende slik ut:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta name="author" content="Brumle Blichfeldt" />
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</HEAD>
<BODY>
<h4>Dette er et forsøk på å bruke CSS3 og @font-face</h4>
<h5>Her er en tekst som ikke er modifisert</h5>
</BODY>
</HTML>
Om du ser etter har eg også lagt inn at det er eg som har laget siden og eg har valgt charset UTF-8. Om du følger de oppskriftene eg tidligere har lagt ut på bloggen vet du at eg bruker UTF-8 uten BOM. Derfor har eg valgt dette charset.
CSS filen vår. Her skal vi legge inn det som får skriften til å endre seg. (Forutsetter at du har fonten)
Vi skal bruke en funksjon som heter @font-face. Ved å bruke funksjonen kan du bruke den fonten du selv måtte ønske.
vi legger inn i style.css
@font-face
{
font-family: minH4font;
src: url('sansation/Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9+ */
}
font-family blir på en måte en tag eller krok om du vil der du henger på informasjon om hvilken font du vil bruke. Så når vi etter på skal fortelle hva som skal endres, så kan vi fortelle at vi ønsker å knytte teksten vår til den font-family som heter minH4font.
Som du ser at url'en eg har valgt har eg en mappe som heter sansation der eg har lagt denne fonten inn. Om du skal få dette til å fungere i IE9 må du ha Sansation_Light.eot også tilgjengelig.
Neste skritt er å legge inn følgende i style.css
h4
{
font-family:minH4font;
}
Dette skal få teksten du la inn mellom <h4> og </h4> til å endre seg, mens teksten du la inn mellom <h5> og </h5> vil være som den var.
Om du vil lese litt mer om css og fonter kan dette kanskje være en god side å starte på:
http://www.w3schools.com/css/css_font.asp
Der finnes litt forskjellige videoer på youtube av ymse kvalitet, men om du ønsker å titte ekstra på det kan du kanskje plukke opp noen tips. Som for eksempel siden http://www.fontsquirrel.com/ Denne refereres det mye til!
I neste blogginnlegg om CSS vil eg vise noen andre små triks som kan lage en litt kul bakgrunn på din hjemmeside. For eksempel noe som ligner på et tregulv.
Om eg ikke blir brutt opp i bits eller inntar en binær form så vil det snart komme en ny blogg med nye erfaringer fra Mitt IT-eventyr!
Ingen kommentarer:
Legg inn en kommentar