iMeil NewsLetter - Marketing global

Cómo cambiar fuentes con CSS

GregPor: Greg Alvarez
iMeil.com.mx
Octubre 5, 2010

Compártelo:   Comparte en Facebook Comparte en Twitter Comparte en LinkedIn

Cómo cambiar fuentes con CSS A menudo, la etiqueta BODY es una parte esencial de los estilos de nuestro sitio web. Adquiere esta particularidad por la referencia que se le hace para aplicar fuentes, colores y fondos para todo nuestro sitio web.

Vamos a conocer cómo aplicar cambios a los textos desde el Body y a través de etiquetas específicas. Si te gustaría que se incluya un ejemplo específico, utiliza el formulario de comentarios para ello.

Cambiar fuentes desde el Body

Cambiar fuentes es sumamente sencillo cuando dispones del archivo CSS referenciado en forma externa en tu sitio (como se ha sugerido hacerlo en el Tutorial HTML Intermedio ), pero se torna complicado cuando el código que empleas se encuentra incrustado en cada una de las páginas. Para este caso, asumo que le tienes en forma externa.

Nuestro código, enfocado al tipo de fuente a utilizar, suele ser como el siguiente:

body {
font:normal 12px arial,verdana;
color:#333;
}
Para modificar la fuente o cambiarla, sólo se deben aplicar cambios en este código.

arial,verdana se puede modificar para dejar exclusivamente verdana o cualquier otro tipo de fuente que sea soportada por la mayoría de los navegadores, de tal forma que la fuente sea ésta para todos los textos que no cuenten con un estilo específico dentro de los contenidos.

Las fuentes Arial y Verdana son soportadas en más de un 90 por ciento por los navegadores web en sus diferentes plataformas (Windows, Mac, Unix, Linux). Si deseas experimentar con otras fuentes, harías bien en utilizar las que han sido consideradas como fuentes web.

normal se puede cambiar con bold para cambiar las fuentes a negritas, aunque no existe necesidad de ello, ya que el texto suele ser presentado en forma normal.

12px puede ser modificado para asignar el tamaño de la fuente. Una fuente con un tamaño de 12 pixeles puede leerse en forma aceptable en cualquier tipo de resolución, ya sea la estándar actual de 1024x768 pixeles o una mayor de, digamos, 1600x1024 pixeles (en monitores de 18 pulgadas y superiores).

#333 puedes cambiarlo al color que deseas para tu fuente. En este ejemplo, la fuente se presenta en un color gris obscuro que se asemeja mucho al negro. Si colocas #fff la fuente se presentará en blanco. Si utilizas Dreamweaver para codificar y desarrollar tus sitios, después de colocar los dos puntos y seguido, presentados en el código CSS, el programa te presenta la ventana de selección de color, con lo que puedes realizar pruebas y seleccionar el que más se adapte a los fondos y gráficos del diseño de tu sitio.

Cambiar fuentes mediante etiqueta específica

Si lo que deseas es cambiar la fuente de un párrafo o sección especial de tus contenidos, lo que debes hacer es generar una clase y aplicarla al elemento HTML que contiene a ese texto. Veamos un ejemplo: el siguiente código presenta la forma de subrayar y colocar en itálicas las palabras que se encuentran entre las etiquetas <span> </span>

.cambiarTexto {
font:italic 12px arial,verdana;
color:#333;
text-decoration:underline;
}
Y se aplica en la siguiente forma al elemento HTML respectivo:

Lorem ipsum <span class="cambiarTexto">dolor sit amet</span>, consectetuer adipiscing elit. Morbi eu enim. Aliquam aliquet metus rutrum libero.
Con este tipo de ejemplos puedes implementar estilos para todos los textos de tu sitio, aplicándoles diferentes presentaciones para los mismos, con la finalidad de diferenciarlos y ofrecer algo más profesional. Entre éstos se encuentran: textos normal, encabezados, títulos, subtítulos, links. Y, así mismo, podrás implementarles márgenes y/o espacios arriba, abajo, a derecha o izquierda.

Lee lo que se opina sobre el tema

Comentario:
Nombre*:
Email*: