Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /var/www/webitricerne.dk/public_html/wp/wp-content/plugins/revslider/includes/operations.class.php on line 2734
CSS-koder Typografi - Webitricerne
Blog

TYPOGRAFI

Udvalgte CSS-koder der har med fonte og typografi at gøre!

font-style
font-variant
font-family
font-weight
font-size
line-height

text-align
text-decoration
text-indent
text-shadow
text-transform

color
background-color
letter-spacing
Shorthand Properties

WP-typografi

FONT-STYLE

Normal
font-style: normal;

 

Italic
font-style: italic;

 

Oblique
font-style: oblique;

FONT-VARIANT

Normal
font-variant: normal;

 

small caps
font-variant: small-caps;

FONT-FAMILY

Times New Roman
font-family:"Times New Roman",Georgia,Serif;
Verdana
font-family:"Verdana",sans-serif;
Source Sans Pro
font-family:"Source Sans Pro",sans-serif;

FONT-WEIGHT

Google-font Source Sans Pro

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

Google-font Source Sans Pro

-
font-weight: lighter;
font-weight: light;
font-weight: normal;
-
-
font-weight: bold;
-
font-weight: bolder;

System-font Verdana

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

System-font Verdana

font-weight: lighter;
-
font-weight: light;
font-weight: normal;
-
-
font-weight: bold;
-
font-weight: bolder;

FONT-size

font-size: 9px;
font-size: 10px;
font-size: 13px;
font-size: 16px;
font-size: 16px;
font-size: 18px;
font-size: 24px;
font-size: 32px;
font-size: 0.563em;
font-size: 0.625em;
font-size: 0.813em;
font-size: 1em;
font-size: 1em;
font-size: 1.125em;
font-size: 1.500em;
font-size: 2em;
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: normal;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: 56.3%;
font-size: 62.5%;
font-size: 81.3%;
font-size: 100%;
font-size: 100%;
font-size: 112.5%;
font-size: 150%;
font-size: 200%;
Omregn pixel til em - eller omvendt: www.pxtoem.com/

LINE-HEIGHT (SKYDNING)

line-height: 16px;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

line-height: 1em;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

line-height: 100%;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

line-height: 1;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

line-height: 22px;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

line-height: 1.375em;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

line-height: 137.5%;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

line-height: 1.375;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

line-height: 24px;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

line-height: 1.5em;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

line-height: 150%;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

line-height: 1.5;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Omregn pixel til em - eller omvendt: www.pxtoem.com/

TEXT-ALIGN

text-align: left;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
text-align: center;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
text-align: right;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
text-align: justify;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

TEXT-DECORATION

None
text-decoration: none;
Underline
text-decoration: underline;
Overline
text-decoration: overline;
Line-through
text-decoration: line-through;

TEXT-INDENT

text-indent: 20 px;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

text-indent: 1.250em;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

text-indent: 20%;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

TEXT-shadow

Lorem ipsum

text-shadow:2px 2px 8px grey;

Lorem ipsum

text-shadow:5px 5px 0px #ccc;

Lorem ipsum

text-shadow:2px 2px 8px rgb(255,140,0);

Lorem ipsum

text-shadow:2px 2px 8px rgba(255,140,0,0.5);

Syntaks:
text-shadow: h-shadow v-shadow blur farve;

H-shadow

text-shadow: 5px 0px 0px lightgrey;

V-shadow

text-shadow: 0px 5px 0px lightgrey;

BLUR

text-shadow: 0px 0px 20px #000;

FARVE

text-shadow: 0px 0px 10px rgb(255,140,0);

TEXT-TRANSFORM

text-indent: transform: none;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

text-indent: transform: uppercase;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

text-indent: transform: capitalize;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

text-indent: transform: lowercase;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

COLOR

Lorem ipsum

color: grey;

Lorem ipsum

color: #4c9ebd;

Lorem ipsum

color: rgb(255,140,0);

Lorem ipsum

color: rgba(255,140,0,0.2);

BACKGROUND-COLOR

Lorem ipsum

background-color: grey;

Lorem ipsum

background-color: #4c9ebd;

Lorem ipsum

background-color: rgb(255,140,0);

Lorem ipsum

background-color: rgba(255,140,0,0.2);

LETTER-SPACING

letter-spacing: normal;

Lorem ipsum dolor sit amet

letter-spacing: 1px;

Lorem ipsum dolor sit amet

letter-spacing: 1em;

Lorem ipsum dolor sit amet

letter-spacing: 10%;

Lorem ipsum dolor sit amet

Shorthand properties

font-style, font-weight, font-size, line-height og font-family kan koges ned til en CSS-linje, eksempel:

font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;

 Shorthand:

font: italic bold .8em/1.2 Arial, sans-serif;
Back To Top
Search