La selección de la familia de fuentes en (X) HTML , CSS y sistemas derivados especifica una lista de fuentes priorizadas y nombres de familias genéricas; junto con las propiedades de fuente correlacionadas, esta lista determina la fuente particular que se utiliza para representar caracteres. La selección de la familia está disponible en dos formas: en el <font>...</font>elemento (X)HTML obsoleto con su faceatributo y en la font-familypropiedad CSS.
El término CSS font family se corresponde con el término tipográfico typeface , 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 diferencia 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 se corresponde 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 se separa con comas. Para evitar resultados inesperados, la última familia de fuentes de la lista debe ser una de las familias genéricas que, por defecto, siempre están disponibles. Si no se encuentra ninguna fuente, el navegador web utilizará su fuente predeterminada, que puede ser una definida por el usuario. Según el navegador web, un usuario puede, de hecho, anular la fuente definida por el autor 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 más grande o la evitación de determinados colores.
Además de las fuentes locales, los navegadores web modernos permiten vincular archivos de fuentes personalizadas directamente mediante la @font-facedeclaración. Una vez incluidas, dichas fuentes se pueden incluir en la font-familypropiedad, junto con todas las fuentes locales y de respaldo.
El siguiente ejemplo define el mismo tipo de fuente ( Times o una serif predeterminada , 14 puntos, cursiva) de tres maneras:
styleatributo.<font>...</font> y su atributo no estándar face. ( <i>...</i>no está obsoleto en general, pero su uso de presentación sí lo está).. texto { familia-fuente : times , serif ; tamaño-fuente : 14 pt ; estilo-fuente : italic ; } < p clase = "texto" >Texto de muestra formateado con CSS en una hoja de estilo separada.</p>< p style = "font-family: times, serif; font-size:14pt; font-style:italic" >Texto de muestra formateado con CSS en línea.</p>< p >< i >< tipo de fuente = "times, serif" tamaño = "3" > Texto de muestra formateado con la etiqueta FONT obsoleta.</font> </i> </p>Se recomienda colocar un espacio después de la coma y colocar cualquier nombre que contenga espacios entre comillas.
Aunque CSS intenta definir una familia de fuentes como lo mismo que un tipo de letra, la font-familyentrada y su predecesor HTML no estándar también se han utilizado históricamente para identificar el tipo de letra completo . 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 de la pedantemente correcta font-family: 'Gill Sans', 'Heisei Mincho'; font-weight: 900. Ni CSS2 ni CSS3 aprueban tal uso (no se encuentran en los ejemplos), pero la mayoría de los navegadores los aceptan como "nombres" válidos de todos modos.
La familia de fuentes puede utilizar 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. [1] Una instalación predeterminada de Firefox en Microsoft Windows , por ejemplo, mostrará tanto las fuentes serif como Times New Roman y las fuentes sans-serif como Arial .
Generalmente solo un pequeño subconjunto de ellos, principalmente Serif, Sans-serif, Monospace y Cursive [2] son fácilmente configurables por el usuario en los navegadores web.
Muchos sistemas también realizan sustituciones de fuentes especiales para reemplazar las familias "conocidas" faltantes con alternativas compatibles con el sistema métrico . Por ejemplo, Windows sustituye Helvética por Arial y Times por Times New Roman. [3] Estas familias no son genéricas en el sentido CSS y, por lo general, no se manejan a nivel del navegador.