| HTML |
|---|
| Comparaciones |
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éricos; junto con las propiedades de las fuentes correlacionadas, esta lista determina la fuente particular que se usa para representar los caracteres. La selección de familia está disponible en dos formas: en el <font>...</font>elemento HTML obsoleto (X) con su faceatributo y en la propiedad CSS font-family .
La familia de fuentes de términos CSS se empareja con el tipo de letra del término tipográfico , 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. La fuente del término CSS se corresponde con "fuente"; se decide por 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, por defecto, siempre están disponibles. 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, de hecho, anular la fuente definida por el escritor de 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 evitar ciertos colores.
Además de las fuentes locales, los navegadores web modernos admiten la vinculación de archivos de fuentes personalizadas directamente mediante la @font-facedeclaración. Una vez incluidas, dichas fuentes se pueden enumerar en la font-familypropiedad, junto con todas las fuentes locales y alternativas.
Ejemplos [ editar ]
El siguiente ejemplo define la misma fuente ( Times o una serif predeterminada , 14 puntos, cursiva) de tres formas:
- Con CSS en una hoja de estilo separada.
- Con CSS en línea aplicado a un elemento a través del
styleatributo. - Con el elemento de presentación obsoleto
<font>...</font>y su atributo no estándarface. (<i>...</i>no está desaprobado en general, pero su uso de presentación sí lo es).
. text { font-family : times , serif ; tamaño de fuente : 14 pt ; estilo de fuente : cursiva ; }< p class = "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 > < font face = "times, serif" size = "3" >Texto de muestra formateado con la etiqueta FONT obsoleta.</ fuente > </ i > </ p >Es una buena práctica poner un espacio después de la coma y poner cualquier nombre que contenga espacios entre comillas.
Nombre de fuente como apellido [ editar ]
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 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 / regular y cursiva / regular).
Como resultado, solía ser común ver declaraciones como font-family: 'Gill Sans Extrabold', 'Heisei Mincho W9'en lugar de lo pedante correcto font-family: 'Gill Sans', 'Heisei Mincho'; font-weight: 900. Ni CSS2 ni CSS3 respaldan tal uso (no se encuentran en los ejemplos), pero la mayoría de los navegadores los aceptan como "nombres" válidos.
Fuentes genéricas [ editar ]
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 las fuentes instaladas en el sistema. [1] Una instalación predeterminada de Firefox en Microsoft Windows , por ejemplo, mostrará tanto serif como Times New Roman como sans-serif como Arial .
Por lo general, 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 la sustitución de fuentes en mayúsculas y minúsculas especiales para reemplazar las familias "conocidas" que faltan por alternativas compatibles con métricas . Por ejemplo, Windows sustituye Helvetica por Arial y Times por Times New Roman. [3] Estas familias no son genéricas en el sentido de CSS y, por lo general, no se manejan a nivel del navegador.
Muestras de familias de fuentes [ editar ]
 | Esta sección puede requerir una limpieza para cumplir con los estándares de calidad de Wikipedia . El problema específico es: Valor dudoso en mantener las familias "genéricas" no estándar. Mejor haz un WikiBlame para ver quién los agregó. ( Febrero de 2021 ) ( Obtenga información sobre cómo y cuándo eliminar este mensaje de plantilla ) |
La siguiente tabla es una muestra de algunas familias genéricas en CSS. Las filas en rosa no son estándar y no deben usarse.
| Fuente | Ejemplo (la vista depende de las fuentes instaladas) [mayúsculas, frases, números, griego, árabe, ruso] |
|---|---|
| Cursivo | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Decorativo | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Fantasía | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Fraktur | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Monoespacio | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| romano | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Sans-serif | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Serif | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Texto | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Esta sección puede requerir una limpieza para cumplir con los estándares de calidad de Wikipedia . El problema específico es: Manejo inconsistente de tipos de letra con varios nombres, especialmente en Times. Debería hacer un WikiBlame para ver quién decidió agregar los nombres extra. ( Febrero de 2021 ) ( Obtenga información sobre cómo y cuándo eliminar este mensaje de plantilla ) |
La siguiente tabla es una muestra de algunos tipos de letra especificados en CSS. En el caso de que un tipo de letra se publique con varios nombres de "familias de fuentes", los nombres adicionales se encadenan en la reserva.
| Fuente | Ejemplo (la vista depende de las fuentes instaladas) [mayúsculas, frases, números, griego, árabe, ruso] |
|---|---|
| Agencia FB | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Albertina | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Antiqua | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Arquitecto | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Arial | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| BancoFuturista | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| BankGothic | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Carta negra | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Blagovest | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Calibri | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Comic Sans MS | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Consolas | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| mensajero | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Garamond | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Georgia | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Helvética | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Impacto | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Esbirro | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Moderno | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Sans abierto | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Palatino | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Perpetua | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| suizo | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Tahoma ?? | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Veces | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Times New Roman | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Tw Cen MT | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
| Verdana | ABCDEFGHIJKLMNOPQRSTUVWXYZ El veloz zorro marrón salta sobre el perro perezoso. 0123456789 αβγ عربي язык |
Ver también [ editar ]
- Fuentes principales para la Web
- Lista de tipos de letra
- Marcado de presentación
- Tipografía web
Notas [ editar ]
- ^ "Fuentes" . W3.org . Consultado el 21 de septiembre de 2013 .
- ^ muy pocos navegadores web, incluido Konqueror , admiten el cambio de cursiva
- ^ "Tecnología de fuentes - globalización" . docs.microsoft.com .
