Los siguientes estilos se pueden aplicar a las fuentes. Podemos cambiar el tamaño del texto, el color del mismo, su anchura, su estilo e incluso su tipo de letra. Vamos a verlos más detenidamente:
Estilo CSS font color
Este estilo lo usamos para darle color al texto. Lo podemos indicar como nombre del color o con el modo RGB. Este último es el más recomendable, pues no todos los nombres de colores son admitidos en el estándar.
A continuación vamos a ver cómo escribiríamos el estilo para darle al texto un color rojo.
<div style="color:#FF0000;">Este texto se verá de color rojo.</div>
Y el resultado será el siguiente:
Este texto se verá de color rojo.
Estilo CSS font-size
Nos sirve para indicarle el tamaño a la letra. Se lo podemos indicar utilizando las unidades de medida de CSS o mediante los siguientes valores: xx-large, x-large, large, medium, small, x-small, xx-small; siendo “xx-small” el más pequeño y “xx-large” el más grande.
A continuación vamos a ver cómo escribiríamos el estilo para darle al texto un tamaño de fuente de 25 pixeles. Como ves, nosotros hemos elegido darle a la fuente el tamaño mediante una unidad de medida de CSS, ya que es un valor más exacto.
<div style="font-size:25px;">Este texto tiene un tamaño de 25 pixeles.</div>
Y el resultado sería el siguiente:
Este texto tiene un tamaño de 25 pixeles.
Estilo CSS font-family
Utilizaremos este estilo para definir el tipo de fuente que queramos que tenga el texto. Si no le indicamos nada, el texto estará escrito en la tipografía que el usuario tenga en su sistema.
Escribiremos las fuentes separadas con comillas. El navegador buscará por orden cada una de las fuentes especificadas, y usará la primera fuente que encuentre instalada en el sistema del usuario.
Vamos a ver como escribiríamos el estilo font-family:
<div style=" font-family: Georgia, 'Times New Roman', serif;">Este texto estará escrito con un determinado tipo de letra.</div>
Como vemos hemos escrito tres tipos de fuentes. Tu navegador, siguiendo las preferencias marcadas, usará la primera que encuentre instalada en tu sistema. Y el resultado será el siguiente:
Este texto estará escrito con un determinado tipo de letra.
Estilo CSS font-weight
Este estilo se usa para darle anchura al texto. Es decir, define la anchura que tendrá cada caracter. La anchura la podemos especificar de forma relativa al valor actual que tenga el texto (bold , bolder , lighter) o mediante un valor numérico (del 100 al 900).
A continuación vamos a ver cómo escribiríamos el estilo font-weight en un texto. Nosotros hemos querido usar el valor relativo “bold”.
<div style=" font-weight: bold;">Estos caracteres tienen una anchura mayor.</div>
Y el resultado sería el siguiente:
Estos caracteres tienen una anchura mayor.
Estilo CSS font-style
Con el siguiente atributo podemos cambiar el estilo al texto. Los estilos que podemos aplicar al texto son: normal, italic y oblique.
Nosotros al siguiente texto hemos querido darle una forma itálica, por lo que hemos utilizado el siguiente estilo.
<span style=" font-style: italic;">Este texto tiene un estilo itálico</span>
Y el resultado es el siguiente:
Este texto tiene un estilo itálico
Muchas gracias por las explicaciones. Me estaba volviendo loca para cambiar el estilo de un texto concreto de mi blog y gracias a ti lo he conseguido. Un saludo.
Muchas gracias amigo, simple y útil, y sin tanto rollo me sirvió de mucho, gracias
La verdad que sirve de mucho cuando no te acuerdas de una propiedad.
Saludos!
Excelente articulo
Gracias
para un programador novato como yo es una ayuda muy grande la que brindan en la pagina