Volver atrás

Propiedades frecuentes para fuentes en CSS

Info extraída de W3Schools


font-weight

Especifica el 'peso' de una fuente. Establece qué tan gruesos o delgados deben mostrarse los caracteres en el texto.

La capacidad de elegir entre diferentes niveles dependen de la fuente.

Un párrafo con font-weigth en valor lighter (relativo, más ligera que el peso de fuente heredado).

Un párrafo con font-weigth en valor bolder (relativo, más negrita que el peso de fuente heredado.).

Un párrafo con font-weigth en valor 100.

Un párrafo con font-weigth en valor 200.

Un párrafo con font-weigth en valor 300.

Un párrafo con font-weigth en valor normal (por defecto, equivalente a 400).

Un párrafo con font-weigth en valor 500.

Un párrafo con font-weigth en valor 600.

Un párrafo con font-weigth en valor bold (equivalente a 700).

Un párrafo con font-weigth en valor 800.

Un párrafo con font-weigth en valor 900.

Ver más sobre font-weight en W3Schools

font-style

Se utiliza principalmente para especificar texto en cursiva.

Un párrafo con font-style en valor normal (por defecto).

Un párrafo con font-style en valor italic.

Un párrafo con font-style en valor oblique (similar a italic, pero menos compatible).

Ver más sobre font-style en W3Schools

text-align

Especifica la alineación horizontal del texto en un elemento.

Un párrafo con valor text-align en left (por defecto).

Un párrafo con valor text-align en right.

Un párrafo con valor text-align en center.

Un párrafo con valor text-align en justify. Estira las líneas para que cada línea tenga el mismo ancho (como en periódicos y revistas).

Ver más sobre text-align en W3Schools

text-transform

Controla las mayúsculas del texto.

Un párrafo con text-transform en valor none (por defecto). El texto se representa tal como es.

Un párrafo con text-transform en valor uppercase. Transforma todos los caracteres a mayúsculas.

Un párrafo con text-transform en valor lowercase. Transforma todos los caracteres a minúsculas.

Un párrafo con text-transform en valor capitalize. Transforma el primer carácter de cada palabra a mayúscula.

Ver más sobre text-transform en W3Schools

text-decoration

Especifica la decoración añadida al texto. Es una propiedad abreviada para las siguientes propiedades:

text-decoration-line

Establece el tipo de decoración de texto que se utilizará.

Un párrafo con text-decoration-line en valor none (por defecto).

Un párrafo con text-decoration-line en valor underline.

Un párrafo con text-decoration-line en valor overline.

Un párrafo con text-decoration-line en valor line-through

Ver más sobre text-decoration-line en W3Schools

text-decoration-color

Especifica el color de la decoración del texto.

Un párrafo subrayado con underline y valor de text-decoration-color en red

Un párrafo subrayado con underline y valor de text-decoration-color en rgb(0,0,255)

Un párrafo subrayado con underline y valor de text-decoration-color en #00ff00

Ver más sobre text-decoration-color en W3Schools

text-decoration-style

Establece el estilo de la decoración del texto.

Un párrafo con text-decoration-style en valor solid (por defecto). La línea se mostrará simple

Un párrafo con text-decoration-style en valor double. La línea se mostrará doble.

Un párrafo con text-decoration-style en valor dotted. La línea se mostrará como una sucesión de puntos.

Un párrafo con text-decoration-style en valor dashed. La línea se mostrará discontinua

Un párrafo con text-decoration-style en valor wavy. La línea se mostrará ondulada.

Ver más sobre text-decoration-style en W3Schools

text-decoration-thickness

Especifica el grosor de la línea de decoración.

Un párrafo subrayado con underline y valor de text-decoration-thickness en 0.01em

Un párrafo subrayado con underline y valor de text-decoration-thickness en 0.1em

Un párrafo subrayado con underline y valor de text-decoration-thickness en 0.2em

Ver más sobre text-decoration-thickness en W3Schools

Combinaciones con text-decoration

Las siguientes declaraciones:

text-decoration-line: underline;

text-decoration-color: red;

text-decoration-style: wavy;

text-decoration-thickness: 1em;

pueden abreviarse utilizando la propiedad text-decoration:

text-decoration: underline red wavy 1em;

Un párrafo con text-decoration en valores underline red wavy 1em

Un párrafo con text-decoration en valores overline #00ff00 dotted 0.08em

Un párrafo con text-decoration en valores line-through rgba(0,0,255,0.3) double 0.2em

Ver más sobre text-decoration en W3Schools

text-indent

Especifica la sangría de la primera línea en un bloque de texto.

Un párrafo con text-indent en valor 0.5em

Un párrafo con text-indent en valor 2em

Un párrafo con text-indent en valor -0.5em

Un párrafo con text-indent en valor -2em

Ver más sobre text-indent en W3Schools

text-shadow

Agrega sombra al texto. Esta propiedad acepta una lista de sombras separadas por comas que se aplicarán al texto.

text-shadow: h-shadow v-shadow blur-radius color;

Un párrafo con text-shadow en valores 2px 2px 8px red;

Un párrafo con text-shadow en valores 0 0 3px red;

Un párrafo con text-shadow en valores 0 0 3px red, 0 0 5px blue;

Ver más sobre text-shadow en W3Schools

list-style

Es una abreviatura de las siguientes propiedades:

list-style-type

Especifica el tipo de viñeta del elemento de lista.

  • Ítem de lista con list-style-type en valor disc (por defecto).
  • Ítem de lista con list-style-type en valor disc (por defecto).
  • Ítem de lista con list-style-type en valor disc (por defecto).
  • Ítem de lista con list-style-type en valor circle
  • Ítem de lista con list-style-type en valor circle
  • Ítem de lista con list-style-type en valor circle
  • Ítem de lista con list-style-type en valor square
  • Ítem de lista con list-style-type en valor square
  • Ítem de lista con list-style-type en valor square
  • Ítem de lista con list-style-type en valor none
  • Ítem de lista con list-style-type en valor none
  • Ítem de lista con list-style-type en valor none
  • Ítem de lista con list-style-type en valor decimal
  • Ítem de lista con list-style-type en valor decimal
  • Ítem de lista con list-style-type en valor decimal
  • Ítem de lista con list-style-type en valor decimal-leading-zero
  • Ítem de lista con list-style-type en valor decimal-leading-zero
  • Ítem de lista con list-style-type en valor decimal-leading-zero
  • Ítem de lista con list-style-type en valor lower-alpha
  • Ítem de lista con list-style-type en valor lower-alpha
  • Ítem de lista con list-style-type en valor lower-alpha
  • Ítem de lista con list-style-type en valor upper-alpha
  • Ítem de lista con list-style-type en valor upper-alpha
  • Ítem de lista con list-style-type en valor upper-alpha
  • Ítem de lista con list-style-type en valor lower-greek
  • Ítem de lista con list-style-type en valor lower-greek
  • Ítem de lista con list-style-type en valor lower-greek
  • Ítem de lista con list-style-type en valor lower-latin
  • Ítem de lista con list-style-type en valor lower-latin
  • Ítem de lista con list-style-type en valor lower-latin
  • Ítem de lista con list-style-type en valor upper-latin
  • Ítem de lista con list-style-type en valor upper-latin
  • Ítem de lista con list-style-type en valor upper-latin
  • Ítem de lista con list-style-type en valor lower-roman
  • Ítem de lista con list-style-type en valor lower-roman
  • Ítem de lista con list-style-type en valor lower-roman
  • Ítem de lista con list-style-type en valor upper-roman
  • Ítem de lista con list-style-type en valor upper-roman
  • Ítem de lista con list-style-type en valor upper-roman
  • Ítem de lista con list-style-type en valor armenian.
  • Ítem de lista con list-style-type en valor armenian.
  • Ítem de lista con list-style-type en valor armenian.
  • Ítem de lista con list-style-type en valor cjk-ideographic
  • Ítem de lista con list-style-type en valor cjk-ideographic
  • Ítem de lista con list-style-type en valor cjk-ideographic
  • Ítem de lista con list-style-type en valor georgian
  • Ítem de lista con list-style-type en valor georgian
  • Ítem de lista con list-style-type en valor georgian
  • Ítem de lista con list-style-type en valor hebrew
  • Ítem de lista con list-style-type en valor hebrew
  • Ítem de lista con list-style-type en valor hebrew
  • Ítem de lista con list-style-type en valor hiragana
  • Ítem de lista con list-style-type en valor hiragana
  • Ítem de lista con list-style-type en valor hiragana
  • Ítem de lista con list-style-type en valor hiragana-iroha
  • Ítem de lista con list-style-type en valor hiragana-iroha
  • Ítem de lista con list-style-type en valor hiragana-iroha
  • Ítem de lista con list-style-type en valor katakana
  • Ítem de lista con list-style-type en valor katakana
  • Ítem de lista con list-style-type en valor katakana
  • Ítem de lista con list-style-type en valor katakana-iroha
  • Ítem de lista con list-style-type en valor katakana-iroha
  • Ítem de lista con list-style-type en valor katakana-iroha

Ver más sobre list-style-type en W3Schools

list-style-position

Especifica dónde colocar la viñeta del elemento de lista.

  • Ítem de lista con list-style-position en valor outside (por defecto).
  • Ítem de lista con list-style-position en valor outside (por defecto).
  • Ítem de lista con list-style-position en valor outside (por defecto).
  • Significa que las viñetas estarán fuera del elemento de la lista. El inicio de cada línea de un elemento de la lista se alineará verticalmente.

  • Ítem de lista con list-style-position en valor inside
  • Ítem de lista con list-style-position en valor inside
  • Ítem de lista con list-style-position en valor inside
  • Significa que las viñetas estarán dentro del elemento de la lista. Como es parte del elemento de la lista, será parte del texto y empujará el texto al principio.

Ver más sobre list-style-position en W3Schools

list-style-image

Eeemplaza la viñeta de un elemento de lista con una imagen.

  • Ítem de lista con list-style-image en valor url("https://loremflickr.com/20/20")
  • Ítem de lista con list-style-image en valor url("https://loremflickr.com/20/20")
  • Ítem de lista con list-style-image en valor url("https://loremflickr.com/20/20")
  • Ítem de lista con list-style-image en valor url("https://loremflickr.com/50/50")
  • Ítem de lista con list-style-image en valor url("https://loremflickr.com/50/50")
  • Ítem de lista con list-style-image en valor url("https://loremflickr.com/50/50")

Ver más sobre list-style-image en W3Schools

Combinaciones con list-style

Las siguientes declaraciones:

list-style-type: disc;

list-style-position: outside;

list-style-image: none;

pueden abreviarse utilizando la propiedad list-style:

list-style: disc outside none;

Si falta uno de los valores, se utilizará el valor predeterminado para esa propiedad.

Ver más sobre list-style en W3Schools