Estilos de fuente HTML

La fuente del texto de nuestros blogs es parte muy importante del estilo de la plantilla. Para nosotros los novatos es difícil encontrar información clara en Google y como a mi me costo mucho encontrarla la comparto con ustedes para que el tema quede claro de una vez por todas.

Aquí encontraran 13 estilos diferentes de fuente HTML en los que están: "Verdana, Geneva, sans-serif", "Georgia, 'Times New Roman', Times, serif", "Courier New', Courier, monospace", "Arial, Helvetica, sans-serif", "Tahoma, Geneva, sans-serif", "Arial Black', Gadget, sans-serif", "Times New Roman', Times, serif", "Palatino Linotype', 'Book Antiqua', Palatino, serif", "Lucida Sans Unicode', 'Lucida Grande', sans-serif",  "'MS Serif', 'New York', serif", "Lucida Console', Monaco, monospace" y "Comic Sans MS', cursive".


En la imagen esta numerado cada estilo y dejo el código (DIV) para que lo puedan aplicar. También les dejo como deben aplicarlo con CSS.



1 -
<div style="font-family: Verdana, Geneva, sans-serif">1 - Texto en Verdana, Geneva, sans-serif</div>
2 -
<div style="font-family:Georgia, 'Times New Roman', Times, serif"> 2 - Texto en Georgia, 'Times New Roman', Times, serif</div>
3 -
<div style="font-family:'Courier New', Courier, monospace"> 3 - Texto en Courier New', Courier, monospace</div>
4 -
<div style="font-family:Arial, Helvetica, sans-serif"> 4 - Texto en Arial, Helvetica, sans-serif</div>
5 -
<div style="font-family:Tahoma, Geneva, sans-serif"> 5 - Texto en Tahoma, Geneva, sans-serif</div>
6 -
<div style="font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif"> 6 - Texto en Tahoma, Geneva, sans-serif</div>
7 -
<div style="font-family: 'Arial Black', Gadget, sans-serif"> 7 - Texto en Arial Black', Gadget, sans-serif</div>
8 -
<div style="font-family: 'Times New Roman', Times, serif"> 8 - Texto en Times New Roman', Times, serif</div>
9 -
<div style="font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif"> 9 - Texto en Palatino Linotype', 'Book Antiqua', Palatino, serif</div>
10 -
<div style="font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif"> 9 - Texto en Palatino Linotype', 'Book Antiqua', Palatino, serif</div>
11 -
<div style="font-family: 'MS Serif', 'New York', serif "> 11 - Texto en 'MS Serif', 'New York', serif </div>
12 -
<div style="font-family: 'Lucida Console', Monaco, monospace"> 12 - Texto en Lucida Console', Monaco, monospace</div>
13 -
<div style="font-family: 'Comic Sans MS', cursive"> 13 - Texto en Comic Sans MS', cursive</div>
En CSS
.nombredeldiv {
font-family: Tahoma, Geneva, sans-serif;
}
Como siempre espero haber ayudado en su aprendizaje e ir creciendo al par. Cualquier duda, aclaración o corrección estoy para escucharlos.
Gracias por pasar!

1 comentario: