FUENTES CSS

font-size 

La propiedad font-size establece el tamaño del texto.
 
[Sintaxis]

p{
  font-size: <absolute-size> | <relative-size> | <length> | <percentage>;
}

• tamaño absoluto:

           [ xx-small | x-small | small | medium | large | x-large | xx-large ]

• tamaño relativo:

         [ larger | smaller ]

Ejemplo

[style.css]

p#ab{ font-size: small; }
p#px{ font-size: 24px; }
p#em{ font-size: 1.2em; }
p#per{ font-size: 180%; }

[index.html]

<p id="ab">This is a paragraph(small)</p>
<p id="px">This is a paragraph(24px)</p>
<p id="em">This is a paragraph(1.2em)</p>
<p id="per">This is a paragraph(180%)</p>

 

font-family

La propiedad font-family establece la familia de fuentes del texto.

[Sintaxis]

p{
  font-family: <family-name> | <generic-family>;
}

• family-name es el nombre de una familia de fuentes de su elección. Por ejemplo, "Gill", "Helvetica" y "Time New Roman". 

• generic-family son:

          [ serif | sans-serif | cursive | fantasy | monospace ]

Ver también 15.3.1 Generic font families.

Ejemplo

[style.css]

p#se{ font-family: "Time New Roman", Garamond, serif; }
p#sa{ font-family: Helvetica, "MS Verdana", sans-serif; }

[index.html]

<p id="se">This is a paragraph(serif)</p>
<p id="sa">This is a paragraph(sans-serif)</p>

 

font-style

La propiedad font-style selecciona el estilo del texto. Esta propiedad se usa a menudo para seleccionar texto en cursiva.

[Sintaxis]

p{
  font-style: normal | italic | oblique;
}

Ejemplo

[style.css]

p#no{ font-style: normal; }
p#i{ font-style: italic; }
p#ob{ font-style: oblique; 

[index.html]

<p id="no">This is a paragraph(normal)</p>
<p id="i">This is a paragraph(italic)</p>
<p id="ob">This is a paragraph(oblique)</p>

 

font-weigth

La propiedad font-weight selecciona el peso del texto.

[Sintaxis]

p{
  font-weight: normal |bold | bolder | lighter | 100 | 200 | 300 | 400 

| 500 | 600 | 700 | 800 | 900
}

Ejemplo

[style.css]

p#one{ font-weight: 100; }
p#two{ font-weight: 200; }
p#three{ font-weight: 300; }
p#four{ font-weight: 400; }
p#five{ font-weight: 500; }
p#six{ font-weight: 600; }
p#seven{ font-weight: 700; }
p#eight{ font-weight: 800; }
p#nine{ font-weight: 900; }

[index.html]

<p id="one">This is a paragraph(100)</p>
<p id="two">This is a paragraph(200)</p>
<p id="three">This is a paragraph(300)</p>
<p id="four">This is a paragraph(400)</p>
<p id="five">This is a paragraph(500)</p>
<p id="six">This is a paragraph(600)</p>
<p id="seven">This is a paragraph(700)</p>
<p id="eight">This is a paragraph(800)</p>
<p id="nine">This is a paragraph(900)</p>

 

Ver también 15 Fonts.

Reto

1. Establece la familia de fuentes de forma predeterminada.

[style.css]

body{
  color: #333333;
  font-size: 0.9em;
  font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, Geneva, 

                sans-serif;
}

2. Cambia el tamaño de los textos de navegación laterales.

[style.css]

nav ul li{
  font-size: 1.5em;
}

 

Fuente www.w3.org