Google webfonts og skrift på skrå i CSS

 

Før og efter nedenstående:
Google Webfonts:

Bigbookofwhy trængte til en mere passende font til en gammel bog. En simpel løsning til en ny og anderledes font er at finde en blandt google webfonts – her kan man få overblik over hvordan de enkelte fonte ser ud i et enkelt ord, en sætning eller et helt paragraf, afhængigt af hvad man skal bruge den til, og man kan filtrere fonte efter tykkelse, grad af skråskrift og fontbredde. Jeg filtrerede efter en højere grad af “skråskrift-ness” (det er der noget der hedder – her i bloggen – for her sker mange mærkelige ting) og valgte den der Damion. En hurtig tilføjelse i HTML med:

<link href=’http://fonts.googleapis.com/css?family=Damion’ rel=’stylesheet’ type=’text/css’>

Og i css-filen bruges font-family: ‘Damion’, cursive;

Skrift (eller andre objekter) på skråt vha. CSS:
Nu havde jeg jo fået mig en fin(ere) font, men skriften passede jo stadig ikke helt til bogen, hvis sider var på skrå. Jeg måtte derfor undersøge om det evt. var muligt at få vendt sin skrift på skærmen, så den kunne vende lidt skråt og dermed matche siden. Og sørme om det ikke var muligt.

Her er koden til at vende et objekt (en div) i en skrå vinkel på skærmen. Her vendt 7 grader, som vender teksten eller objekten skråt nedad:

div{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
}

Sæt – foran (fx -7) for at vende det modsat vej (skråt op!).

Eksempel ses her: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_image_gallery

2 comments

  1. Macke siger:

    Nydeligt. Det font er dog lidt svært at læse, når du har “font-weight: bold;”