Propiedades para establecer la fuente
Las propiedades de las fuentes en CSS son usadas para configurar la apariencia deseada para el texto de un documento. Las más empleadas son:
font-family
Nos permite especificar un nombre de fuente en concreto o bien una familia genérica de fuentes. Se puede especificar una lista de fuentes separadas por comas teniendo en cuenta que si el nombre de la fuente o familia tiene algún espacio en blanco intercalado habrá que encerrarlo entre comillas.
Hay que darse cuenta de que el tipo de letra elegido debe estar instalado en el equipo cliente. Por lo que, si escogemos un tipo de letra “poco habitual”, corremos el riesgo de que el usuario no vea la página tal y como la hemos diseñado.
font-size
Nos permite configurar el tamaño del texto. Mientras que el HTML estándar prevé sólo 7 niveles predefinidos para el tamaño del texto, las hojas de estilo CSS permiten un control mucho más preciso y elástico sin, prácticamente, limitaciones.
font-weight
Nos permite establecer el espesor o intensidad de las fuentes, como <b> para el HTML clásico.
font-style
Nos permite configurar el “estilo” de la fuente. Hay tres valores posibles:
normalque no configura ningún estilo en particular sino que toma el definido por defecto en el navegador.italicque equivale al elemento del HTML clásico (<i>) que coloca el testo en cursiva.obliqueque funciona, aparentemente, como “italic”.
font-variant
Permite dos posibilidades: normal y small-caps. Con normal, el texto no cambia de apariencia y con small-caps el texto pasa a mostrarse en mayúsculas de un tamaño inferior.
¿Qué es font-variant: small-caps?
font-variant: small-caps?Puedes verlo en aquí.
font
Esta propiedad engloba las propiedades anteriores y más, pero debe ser escrita siguiendo el siguiente patrón:
1
font: (<font-style> | <font-variant> | <font-weight>)? <font-size>(/<line-height>)? <font-family>
Siendo <font-style> realmente el valor de la propiedad <valor de la propiedad font-style> y lo mismo con todas las demás propiedades.
Si no sabes como interpretar una expresión regular puedes leer el artículo Expresiones regulares
Intenta entender los siguientes ejemplos:
1
2
3
4
5
6
7
p { font: 12px arial; }
p { font: italic small-caps bold 12px arial; }
p { font: oblique small-caps 900 12px/14px arial; }
p { font: 80% sans-serif; }
p { font: x-large/110% "new century schoolbook", serif; }
p { font: bold italic large Palatino, serif; }
p { font: normal small-caps 120%/120% fantasy; }
Propiedades para establecer el texto
Las propiedades de texto permiten aplicar estilos a los textos espaciando sus palabras o sus letras, decorándolo, alineándolo, transformándolo, etcétera. Algunas de estas propiedades son:
Las propiedades de texto permiten aplicar estilos a los textos espaciando sus palabras o sus letras, decorándolo, alineándolo, transformándolo, etcétera. Algunas de estas propiedades son:
text-decoration
Permite decorar el texto con subrayados y otros efectos. Los valores que puede tener son:
none(ninguno)underline(subrayado)overline(con una línea por encima)line-through(tachado), blink (parpadeante)inherit(heredado)
text-transform
Controla la apariencia de las letras en un elemento. Los valores que puede tener son:
none(texto normal, con mayúsculas y minúsculas)capitalize(cada palabra comienza con mayúsculas)uppercase(todo el texto aparece en mayúsculas)lowercase(todo el texto aparece en minúsculas)
¿Qué diferencia hay entre text-transform: uppercase y text-transform: capitalize de la propiedad ?
text-transform: uppercase y text-transform: capitalize de la propiedad ?uppercasepara convertir textos a mayúsculas.lowercasepara convertir textos a minúsculas.capitalizeponer sólo la primera letra en mayúscula.
line-height
Establece el espacio que hay entre dos líneas consecutivas.
Ejemplos:
1
2
3
p { line-height: 1.4; } /* Se establece un factor de multiplicación respecto al tamaño font-size */
p { line-height: 14pt; } /* Establece una distancia fija entre las líneas de 14 puntos */
p { line-height: 140%; } /* Establece una distancia proporcional (%) respecto a font-size */
text-indent
Sangra la primera línea de texto de un párrafo.
Ejemplos:
1
2
3
p { text-indent: 20px; } /* Define un sangrado positivo. El valor por defecto es 0. */
p { text-indent: -12px; } /* Éste es negativo (hacia la izquierda). */
p { text-indent: 10%; } /* Aquí está como un porcentaje respecto al ancho del elemento padre. */
letter-spacing
Configura sobre el espacio que hay entre los caracteres. Este valor puede aumentar o disminuir ya que, al igual que text-indent y otras propiedades, admite valores positivos y negativos.
Ejemplos:
1
2
p { letter-spacing: 12px; } /* Expande los caracteres. Los separa */
p { letter-spacing: -0.5px; } /* Contrae los caracteres. Los junta */
white-space
Permite establecer cómo se gestionan los espacios en blanco en un elemento. Los valores que puede tener son:
normal: Los espacios en blanco adicionales son ignorados por el navegador.pre: Los espacios en blanco adicionales son utilizados como cuando se emplea la etiqueta pre en HTML.nowrap: No se produce el ajuste de línea automático por lo que el texto permanecerá en la misma línea hasta que encuentre una etiqueta<br/>.