El formateo de texto es uno de los usos mas extendidos de CSS. De plano reemplaza la etiqueta FONT con sus atributos SIZE, COLOR y FACE.
Define de una sola vez todas las propiedades font.
| Propiedad | Valor inicial |
|---|---|
| font-style | normal |
| font-variant | normal |
| font-weight | normal |
| font-stretch | normal |
| font-size | medium (obligatoria) |
| line-height | normal |
| font-family | depende del navegador (obligatorio) |
font: 12pt/14pt sans-serif; font: 80% serif; font: bold italic large arial;
Es obligario señalar sont-size y font-face al definir la propiedad font general. Omitirlas causa un error de sintaxis y toda la declaracion CSS es ignorada.
Al definir font general la propiedad font-size-adjust se establecera a su valor inicial (none).
Define el aspecto de una familia tipográfica entre los valores: normal | italic | oblique, ademas de los valores globales initial | unset | inherit.
font-style: italic; font-style: oblique; /* Valores globales */ font-style: initial; font-style: unset; font-style: inherit;
En realidad es mucho mas simple usar la etiqueta HTML I.
Define el aspecto entre normal | small-caps.
font-variant: small-caps;
Ademas existe la propiedad font-variant-alternates que controla el uso de glifos alternos referenciados por @font-feature-values con valores como: normal | historical-forms | ornaments () | stylistic () | styleset() | swash() | annotation()
Define el peso o grueso de la letra. Algunas fuentes de letra sólo están disponibles en normal y bold. Los posibles valores son: normal | bolt | lighter | bolder | 100 a 900|, ademas de los valores globales initial | unset | inherit.
font-weight: bold; font-weight: 600; font-weight: lighter;
Lighter y bolder es relativo al alemento padre.
En realidad es mucho mas simple usar la etiqueta HTML B.
Define entre normal | condensed | semi-condensed | extra-condensed | ultra-condensed | expanded | semi-expanded | extra-expanded | ultra-expanded, ademas de los valores globales initial | unset | inherit.
Font-Stretch: condensed; Font-stretch: ultra-expanded; /* Global values */ font-stretch: initial; font-stretch: unset; font-stretch: inherit;
Define la dimensión de la letra. Este tamaño puede, a su vez, alterar el aspecto de alguna otra cosa, ya que se usa para calcular la longitud de las unidades: px|em. Los valores posibles son: xx-small | x-small | small | medium | large | x-large | xx-large | absoluto (1 a 7) | relativo (%), ademas de los valores globales initial | unset | inherit.
font-size: small; font-size: 5; font-size: 80%; font-size: larger;
El tamaño predeterminado es medium o 3. Ademas existen dos palabras adicionales: smaller y larger que indica mas pequeño o mas grande respectivamente que el elemento padre.
Al usar valores absolutos: 1em = 16px. Al usar valores relativos (%) es respecto al tamaño de letra del elemento padre.
Define una o mas fuentes o familias de fuentes, con un orden de prioridad. A diferencia de la mayoría de las propiedades CSS, los valores se separan por comas (",") para indicar que son valores alternativos. La selección de fuentes se hace de manera dinámica carácter a carácter, por lo que si un cierto carácter no existe en la primera fuente se buscara en la siguiente. Lo mismo ocurre con los estilos, variantes o tamaños, si no hay en la principal se pasa a la siguiente.
font-family: 'familia o nombre genérico' [, 'familia o nombre genérico']* | inherit font-family: "Gill Sans Extrabold", Helvetica, sans-serif; font-family: Courier, "Lucida Console", monospace; font-family: "Comic Sans MS","Sans-Serif","Verdana";
Un nombre genérico debería ser siempre el ultimo de la lista.
Es posible definir fuentes Google pero deberías enlazarlas primero usando LINK