Familia de fuentes (HTML)

La selección de familia de fuentes en (X)HTML, CSS y sistemas derivados especifica una lista de fuentes prioritarias y nombres de familia genéricos; Junto con las propiedades de fuente correlacionadas, esta lista determina la cara de fuente particular utilizada para representar los caracteres. La selección de familia está disponible en dos formas: en el elemento (X)HTML <font>...</font> con su clase face atributo y en el CSS font-family.

El término CSS familia de fuentes coincide con el término tipográfico tipo de letra, que es una agrupación de fuentes definidas por estilos de diseño compartidos. Una fuente es un conjunto particular de glifos (formas de caracteres), que se diferencian de otras fuentes de la misma familia por propiedades adicionales como el grosor del trazo, la inclinación, el ancho relativo, etc. El término CSS font face coincide con "font"; se decide mediante una combinación de la familia de fuentes y las propiedades adicionales.

Tanto en HTML como en CSS, la lista está separada por comas. Para evitar resultados inesperados, la última familia de fuentes en la lista de fuentes debe ser una de las familias genéricas que están siempre disponibles de forma predeterminada. Si no se encuentra una fuente, el navegador web utilizará su fuente predeterminada, que puede ser una definida por el usuario. Dependiendo del navegador web, un usuario puede anular la fuente definida por el escritor del código. Esto puede deberse a motivos de gusto personal, pero también puede deberse a alguna limitación física del usuario, como la necesidad de un tamaño de fuente mayor o la evitación de ciertos colores.

Además de las fuentes locales, los navegadores web modernos admiten la vinculación de archivos de fuentes personalizadas directamente mediante la declaración @font-face. Una vez incluidas, dichas fuentes se pueden enumerar en la propiedad font-family, junto con todas las fuentes locales y alternativas.

Ejemplos

El siguiente ejemplo define la misma fuente (Times o una serifa predeterminada, 14 puntos, cursiva) de tres maneras:

• Con CSS en una hoja de estilo separada.
• Con inline CSS aplicado a un elemento a través del style atributo.
• Con el elemento de presentación deprecatado ... y su atributo no estándar face. ()... no se deprecated en general, pero su uso de presentación es.)

.texto {} font-family: veces, serif; font-size:14pt; estilo de fuente:italic; }

c)p clase="texto"■Muestra de texto formateado con CSS en una hoja de estilo separada.
.p■c)p estilo="font-family: times, serif; font-size:14pt; font-style:italic"■Texto de muestra formateado con inline CSS.
.p■c)p■ c)i■ c)fuente cara="tiempos, serif" tamaño="3"■Muestra de texto formateado con la etiqueta FONT deprecatada.
.fuente"i"p■

Se recomienda colocar un espacio después de la coma y cualquier nombre que contenga espacios entre comillas.

Nombre de fuente como apellido

Aunque CSS intenta definir una familia de fuentes como un tipo de letra, el font-family y su predecesor HTML no estándar también se han utilizado históricamente para identificar la fuente completa. Este uso se debe a que los archivos de fuentes no se describen a sí mismos como parte de una familia, en parte motivado por el hecho de que pocos editores en ese momento admitían la selección entre más de cuatro estilos de fuente (negrita/normal y cursiva/normal).

Como resultado, solía ser común ver declaraciones como font-family: 'Gill Sans Extrabold', 'Heisei Mincho W9' en lugar del pedantemente correcto font-family: 'Gill Sans', 'Heisei Mincho'; Peso de fuente: 900. Ni CSS2 ni CSS3 respaldan dicho uso (no se encuentran en ejemplos), pero la mayoría de los navegadores los aceptan como "nombres" sin embargo.

Fuentes genéricas

La familia de fuentes puede usar una fuente con nombre específico (como Heisei Mincho W9), pero el resultado depende de las fuentes instaladas en la máquina del usuario. La apariencia real dependerá del navegador y de las fuentes instaladas en el sistema. Una instalación predeterminada de Firefox en Microsoft Windows, por ejemplo, mostrará serif como Times New Roman y ambas sans-serif como Arial.

Por lo general, sólo un pequeño subconjunto de ellos, principalmente Serif, Sans-serif, Monospace y Cursive, son fácilmente configurables por el usuario en los navegadores web.

Muchos sistemas también realizan sustitución de fuentes con mayúsculas y minúsculas especiales para reemplazar fuentes "conocidas" familias con alternativas compatibles con el sistema métrico. Por ejemplo, Windows sustituye Helvetica por Arial y Times por Times New Roman. Estas familias no son genéricas en el sentido CSS y generalmente no se manejan a nivel del navegador.