Hei igjen!
Vet at eg lovet et innlegg om CSS og grafikk, men aller først vil eg at vi skal gå litt videre med fonter. Forrige innlegg snakket eg litt om de fem store nettleserne og foreslo at du kanskje kunne laste de ned.
I innlegget om fonter la vi inn en font som heter Sansation_Light, har du testet den siden i Internet Explorer? Virker ikke helt slik du hadde forventet kanskje..
Internet Explorer krever en annen type format på fontene. Det vil si at vi må skaffe oss den og for vårt bibliotek. Bruk google.com og søk på Sansation_Light.eot, pakk den ut og legg den på samme sted som den andre fonten.
Vi har allerede i vår CSS fil laget klart for denne fonten, så om du ikke allerede har lagt inn resten av banen, så er dette et godt tidspunkt å gjøre dette på.
Oppdater din Internet Explorer 9, og se at dette endrer seg! :)
Nå ser du kanskje viktigheten av å teste i mer enn en nettleser, og kanskje du også etterhvert ser hvor viktig det er å åpne for i dine CSS filer muligheten for at alle brukerne kan få fullt utbytte av det du har laget.
Kanskje du nå kan laste ned flere fonter og teste.
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!
Viser innlegg med etiketten font. Vis alle innlegg
Viser innlegg med etiketten font. Vis alle innlegg
mandag 13. august 2012
fredag 10. august 2012
CSS og fonter
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!
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!
Abonner på:
Innlegg (Atom)