CSS - Propiedades del Formato de Texto

Propiedades de la Fuente

font-style

font-style: normal / italic / oblique

font-variant

font-variant: small-caps / normal

font-weight

font-weight: lighter / normal / bold / bolder / 100-900

font-size y line-height

font-size: 
  /* Tamaño absoluto */
  pt, in, cm, px
  
  /* Tamaño relativo */
  em, rem
  
  /* Porcentaje */
  
  /* Palabras clave */
  xx-large, x-large, large, medium, small, x-small, xx-small, larger, smaller

Font-family

Define la familia tipográfica del texto.

Familias Genéricas

• serif - Times New Roman
• sans-serif - Arial
• monospace - Courier New
• cursive - Comic Sans
• fantasy - Impact

Ejemplos de Uso

font-family: Verdana, Geneva, sans-serif;
font-family: Georgia, Times New Roman, serif;
font-family: Courier New, Courier, monospace;

El nombre genérico de una familia tipográfica no se refiere a ninguna fuente en concreto, sino hacen referencia al estilo de letra. Se recomienda proporcionar una lista de fuentes y el navegador mostrará la página con la primer fuente disponible.

Abreviatura font

font: font-style font-variant font-weight font-size/line-height font-family;

Ejemplos:

font: oblique small-caps bold 18px/24px sans-serif;
font: italic lighter 12px/14px serif;
font: 14px/20px fantasy;

Nota: El orden de los valores es importante. Cualquiera de estos valores puede ser omitido, pero se debe respetar el orden.

Fuentes Especiales

Los navegadores muestran las páginas con las letras instaladas en la pc del usuario. Si se propone un tipo de letra rebuscado, casi ningún usuario dispondrá de la misma.

@font-face

CSS3 permite insertar tipografías específicas, sin la necesidad de que el usuario las tenga instaladas en su dispositivo.

Ejemplo Local:

@font-face {
  font-family: 'take_coverregular';
  src: url('fuentes/take_cover.woff') format('woff');
  font-style: normal;
}

h1 {
  font-family: 'take_coverregular', sans-serif;
}

Google Fonts

Se puede acceder a Google Fonts para seleccionar tipografías específicas sin preocuparse por los derechos de las fuentes.

Pasos:

1. Elige las fuentes que quieres en Google Fonts
2. Añade a la bandeja las fuentes deseadas
3. Ve tu selección y accede al código para aplicarlas
4. Copia el enlace a la hoja de estilos externa y colócala en el head del HTML
5. En CSS haz referencia a la tipografía vinculada mediante la propiedad font-family

Propiedades de Texto

word-spacing

Espacios en blanco entre palabras

word-spacing: 10px;

letter-spacing

Espacios en blanco entre letras

letter-spacing: 2px;

text-decoration

text-decoration: none / underline / overline / line-through

text-shadow

Sombra de texto con desplazamiento en x, desplazamiento en y, desenfoque y color

text-shadow: 20px 20px 50px black;