Fuentes CSS | Aspose.Font para .NET
Este artículo tiene como objetivo enseñarle sobre las fuentes en HTML/CSS y sus propiedades, presentando ejemplos de código sobre cómo trabajar con ellas. Aprenderá a poner su texto en negrita o seminegrita, cómo cambiar el tamaño de la fuente o la familia de fuentes en CSS y mucho más.
También verá la diferencia entre las propiedades de fuente de CSS y la clasificación común de las propiedades de fuente. Estos fundamentos se describen en el artículo ¿Qué es la fuente?.
Fuentes CSS
La fuente en CSS es un recurso que contiene una representación visual de los glifos. Para simplificar, posee información que relaciona los glifos con sus respectivos códigos.
Los recursos de fuente se pueden configurar localmente en un dispositivo en el que funciona un navegador. Para este tipo de fuentes, la información descriptiva se puede obtener directamente del recurso de la fuente (por ejemplo, de un archivo Montserrat.ttf). Para las fuentes web, dicha información se adjunta mediante un enlace al recurso de la fuente.
Propiedades de fuente CSS
El CSS proporciona diversas propiedades de fuente para controlar la apariencia y el comportamiento de las fuentes en las páginas web. Se pueden utilizar de forma individual o combinada para lograr los efectos tipográficos deseados. No todas son compatibles con todos los navegadores, por lo que es esencial considerar la compatibilidad entre navegadores al utilizarlas.
Echemos un vistazo a algunas de las propiedades más utilizadas:
font-family(Familia de fuente)font-weight(Peso/Grosor de fuente)font-stretch(Estiramiento de fuente)font-style(Estilo de fuente)font-size(Tamaño de fuente)font(Propiedad abreviada)font-synthesis(Síntesis de fuente)text-decoration(Decoración de texto)text-transform(Transformación de texto)letter-spacing(Espaciado entre letras)line-height(Altura de línea)word-spacing(Espaciado entre palabras)
Familia de fuente CSS (font-family)
Las fuentes con un diseño común suelen agruparse en una familia de fuentes. Dentro de la familia, los glifos pueden variar en ancho, inclinación o peso.
La propiedad CSS font-family se utiliza para elegir el tipo de letra. Es recomendable especificar todas las variaciones de las fuentes de un tipo, ya que es difícil predecir si la fuente específica está disponible en la computadora del usuario. En ese caso, el navegador comprobará su presencia y clasificará las fuentes notificadas una por una hasta encontrar una disponible.
La propiedad font-family se hereda.
En CSS, la propiedad font-family acepta los siguientes valores:
- Nombre de la familia tipográfica: (
Verdana,Montserrat,Courier). - Familia genérica: Aquí debe indicar uno de los cinco
tipos de fuente:
serif,sans-serif,cursive(equivalente a fuentes script),fantasy(equivalente a fuentes decorativas) omonospace. initial: Configura los valores predeterminados.inherit: Toma los valores del elemento padre.
Ejemplo de uso:
En el siguiente ejemplo se configuran los parámetros correspondientes:
| Propiedad | Valor para el texto 1 | Valor para el texto 2 | Valor para el texto 3 |
|---|---|---|---|
font-family: | Lobster, Pacifico, cursive; | Audiowide, fantasy; | Courier, monospace; |
Sintaxis:
1// texto 1
2.text1 {
3 font-family: Lobster, cursive;
4}
5// texto 2
6.text2 {
7 font-family: Audiowide, fantasy;
8}
9// texto 3
10.text3 {
11 font-family: Courier, monospace;
12}El resultado de la aplicación será el siguiente (tenga en cuenta que el tamaño de fuente y el color se configuraron de la misma forma para los tres textos en el <body>):
Peso de fuente CSS (font-weight)
La propiedad font-weight es responsable del grosor de las líneas de la fuente.
La propiedad font-weight se hereda.
En HTML/CSS, el font-weight puede tener los siguientes valores:
normal: Es el valor predeterminado, equivalente a 400.bold: Hace que la fuente esté en negrita, equivalente al peso 700.bolder: Establece un peso más pesado que el del elemento padre.lighter: Establece un peso más ligero que el del elemento padre.100, 200, 300, 400, 500, 600, 700, 800, 900: Donde100es la fuente más clara y900es la más pesada (negrita).initial: Configura los valores predeterminados.inherit: Toma el valor del elemento padre.
Ejemplo de uso:
Representemos textos con los siguientes parámetros de font-weight:
| Propiedad | Valor para el texto 1 | Valor para el texto 2 | Valor para el texto 3 |
|---|---|---|---|
font-weight: | 900; | 500; | 200; |
Sintaxis:
1// texto 1
2.text1 {
3 font-weight: 900;
4}
5// texto 2
6.text2 {
7 font-weight: 500;
8}
9// texto 3
10.text3 {
11 font-weight: 200;
12}El resultado de la aplicación se verá así (con tamaño y color idénticos para los tres textos). Es importante recordar que la fuente utilizada debe contar con las variaciones de peso necesarias. La mayoría de las fuentes solo están disponibles en pesos normal y bold (o semi-bold). La fuente Segoe UI utilizada en el ejemplo tiene suficientes variaciones para que el texto se represente correctamente con todos los valores establecidos.
Estiramiento de fuente CSS (font-stretch)
La propiedad font-stretch permite elegir un tipo de letra normal, condensado o expandido de la familia de fuentes. Esta propiedad no funciona para todas las fuentes; solo algunas especialmente diseñadas que cuentan con extensiones variantes en su familia pueden representar esta propiedad.
La propiedad font-stretch se hereda.
Los valores de font-stretch en CSS pueden ser los siguientes:
ultra-condensed: Para la fuente más condensada.extra-condensed: Segunda fuente más condensada.condensed: Fuente condensada.semi-condensed: Fuente ligeramente condensada.normal: Valor predeterminado.semi-expanded: Fuente ligeramente expandida.expanded: Fuente expandida.extra-expanded: Segunda fuente más expandida.ultra-expanded: Fuente más expandida.initial: Configura los valores predeterminados.inherit: Toma el valor del elemento padre.
Ejemplo de uso:
| Propiedad | Valor para el texto 1 | Valor para el texto 2 | Valor para el texto 3 |
|---|---|---|---|
font-stretch: | condensed; | normal; | expanded; |
Sintaxis:
1// texto 1
2.text1 {
3 font-stretch: condensed;
4}
5// texto 2
6.text2 {
7 font-stretch: normal;
8}
9// texto 3
10.text3 {
11 font-stretch: expanded;
12}El resultado será el siguiente:
Estilo de fuente CSS (font-style)
Esta propiedad regula la inclinación de la fuente.
La propiedad font-style se hereda.
La propiedad font-style de HTML/CSS puede tener los siguientes valores:
normal: Valor predeterminado que configura la inclinación normal de la fuente.italic: Aplica el estilo itálico al texto.oblique: Establece el tipo de letra inclinado de la fuente (cuando esté disponible en la familia).initial: Configura los valores predeterminados.inherit: Toma el valor del elemento padre.
Ejemplo de uso:
| Propiedad | Valor para el texto 1 | Valor para el texto 2 | Valor para el texto 3 |
|---|---|---|---|
font-style: | normal; | italic; | oblique; |
Sintaxis:
1// texto 1
2.text1 {
3 font-style: normal;
4}
5// texto 2
6.text2 {
7 font-style: italic;
8}
9// texto 3
10.text3 {
11 font-style: oblique;
12}El resultado se verá así:
Es posible que haya notado que los resultados para italic y oblique parecen iguales. Esto se debe a que el valor oblique funciona plenamente solo cuando la fuente posee una variación oblicua específica; de lo contrario, el navegador puede aplicar una inclinación simulada similar a la itálica.
Tamaño de fuente CSS (font-size)
Esta propiedad establece la altura de los glifos de la fuente.
La propiedad font-size se hereda.
El font-size de CSS tiene los siguientes valores:
- Tamaño absoluto: Puede ser
xx-small,x-small,small,medium,large,x-largeoxx-large. El valor predeterminado esmedium. - Tamaño relativo: Comparado con el elemento padre. Puede ser
smallerolarger. - Unidades de medida: Definidas en píxeles (
px) o Ems (em). Elemes una unidad escalable; 1em equivale al tamaño de fuente actual. Si la fuente del documento es de 14pt, 1em equivale a 14pt. - Porcentaje (%): Valor calculado en relación con la fuente del elemento padre.
- Ancho de la ventana gráfica (vw): Permite que la fuente siga el tamaño de la ventana del navegador utilizado. 1vw = 1% del ancho de la ventana gráfica (viewport).
initial: Configura los valores predeterminados.inherit: Toma el valor del elemento padre.
Ejemplo de uso:
| Propiedad | Valor para el texto 1 | Valor para el texto 2 | Valor para el texto 3 |
|---|---|---|---|
font-size: | 7vw; | 70px; | 2em; |
Sintaxis:
1// texto 1
2.text1 {
3 font-size: 7vw;
4}
5// texto 2
6.text2 {
7 font-size: 70px;
8}
9// texto 3
10.text3 {
11 font-size: 2em;
12}Resultado:
Propiedad abreviada CSS (font)
La propiedad CSS font se utiliza para acortar el código, permitiendo establecer varias propiedades relacionadas con la fuente en una sola línea. Las propiedades que se pueden especificar son:
font-style, font-variant, font-weight, font-stretch, font-size/line-height y font-family. También se pueden incluir valores de font-variant como normal o small-caps. Para más detalles sobre small-caps, consulte el párrafo
Variante de fuente del artículo
¿Qué es la fuente?.
Ejemplo de uso:
| Propiedad | Valor para el texto 1 | Valor para el texto 2 | Valor para el texto 3 |
|---|---|---|---|
font: | 6vw Arial; | 60pt Courier, monospace; | - |
Sintaxis:
1// texto 1
2.text1 {
3 font: 6vw Arial;
4}
5// texto 2
6.text2 {
7 font: 60pt Courier, monospace;
8}
9// texto 3
10.text3 {
11}El resultado se muestra en la imagen de abajo. Como no establecimos ningún valor para el tercer texto, se representó con los parámetros predeterminados.
Síntesis de fuente CSS (font-synthesis)
Esta propiedad define si los navegadores pueden sintetizar estilos de negrita o inclinados si están ausentes en la familia de fuentes. Si font-weight o font-style no están presentes en el archivo de la fuente, el navegador puede “simularlos” a menos que esta propiedad lo prohíba.
La propiedad font-synthesis se hereda.
Valores aceptados:
none: Prohíbe la síntesis.weighty/ostyle: Las propiedades indicadas pueden ser sintetizadas.initial: Configura los valores predeterminados.inherit: Toma el valor del elemento padre.
Ejemplo de uso:
| Propiedad | Valor para el texto 1 | Valor para el texto 2 | Valor para el texto 3 |
|---|---|---|---|
font-synthesis: | weight; | style; | none; |
font-weight: | 900; | - | 900; |
font-style: | - | oblique; | oblique; |
Sintaxis:
1// texto 1
2.text1 {
3 font-synthesis: weight;
4 font-weight: 900;
5}
6// texto 2
7.text2 {
8 font-synthesis: style;
9 font-style: oblique;
10}
11// texto 3
12.text3 {
13 font-synthesis: none;
14 font-weight: 900;
15 font-style: oblique;
16}El resultado se muestra a continuación. Como configuramos el valor none para el tercer texto, el navegador no sintetizó los estilos solicitados.
Pilas de fuentes (Font Stacks)
Las pilas de fuentes (font-stacks) se refieren a una lista de fuentes definidas en CSS que se utilizan como opciones de reserva (fallbacks) en caso de que una fuente específica falle o no esté presente en el dispositivo del usuario. Garantizan que los diseñadores mantengan la coherencia tipográfica en diferentes plataformas y navegadores.
Para especificar familias de fuentes, es común definir una pila de fuentes enumerando varias de ellas por orden de preferencia. Si la primera no está disponible, el navegador intenta utilizar la siguiente, y así sucesivamente.
Vea un ejemplo: aquí la fuente preferida es “Helvetica Neue”. Si no está disponible, el navegador intentará con “Arial”. Si “Arial” también falla, el navegador utilizará la fuente genérica sans-serif.
1 font-family: "Helvetica Neue", Arial, sans-serif;Especificar una familia de fuentes genérica (sans-serif, serif o monospace) como última opción de la pila se considera una buena práctica para asegurar que el navegador siempre tenga una alternativa adecuada.
Fuentes seguras para la Web (Web-safe fonts)
Las fuentes seguras para la Web, también conocidas como fuentes de sistema o predeterminadas, son una colección de fuentes generalmente disponibles en diversos sistemas operativos y dispositivos. Se consideran seguras para el diseño web al contar con un amplio soporte.
En los inicios del desarrollo web, las opciones eran limitadas y los diseñadores dependían de un conjunto principal de fuentes instaladas en la mayoría de las computadoras.
Ejemplos de fuentes seguras:
- Arial
- Helvetica
- Times New Roman
- Georgia
- Courier New
- Verdana
- Tahoma
- Trebuchet MS
No obstante, con el avance tecnológico y el uso de fuentes personalizadas (Google Fonts, Adobe Fonts, etc.), la dependencia de las fuentes seguras ha disminuido, ofreciendo más flexibilidad visual a los diseñadores.
¿Cómo utilizar fuentes externas en CSS?
Para utilizar fuentes externas, se emplea la regla @font-face. Esta permite especificar una fuente personalizada y hacerla accesible en su página. Vea cómo hacerlo:
Obtenga los archivos de la fuente:
- Encuentre los archivos en los formatos deseados, como
WOFF,WOFF2,TTFoEOT. - Puede obtenerlos de servicios como Google Fonts o descargarlos de fuentes confiables.
- Encuentre los archivos en los formatos deseados, como
Cargue los archivos:
- Suba los archivos a su servidor web o a una carpeta de su proyecto.
Defina la regla @font-face:
- En su archivo CSS, especifique el nombre de la familia y la ruta a los archivos, incluyendo múltiples formatos para compatibilidad con diferentes navegadores.
Ejemplo:
1 @font-face {
2 font-family: 'MiFuentePersonalizada';
3 src: url('ruta/mi-fuente.woff2') format('woff2'),
4 url('ruta/mi-fuente.woff') format('woff');
5 /* Añada otros formatos si están disponibles */
6 }- Aplique la fuente:
- Tras definir
@font-face, puede usar el nombre elegido en la propiedadfont-family. Si la fuente personalizada falla, el navegador utilizará la alternativa genérica.
- Tras definir
1 body {
2 font-family: 'MiFuentePersonalizada', sans-serif;
3 }- Pruebe y verifique en diferentes navegadores y dispositivos.
Algunas palabras sobre tipografía responsiva
La tipografía responsiva es la práctica de diseñar e implementar la tipografía de un sitio para que se ajuste y adapte a diferentes tamaños de pantalla y dispositivos. Implica ajustar factores como el tamaño de la fuente, la longitud de la línea y el espaciado.
Aspectos clave:
- Unidades relativas: En lugar de tamaños fijos, se usan porcentajes,
emsoremspara escalar los textos proporcionalmente. - Consultas de medios (Media Queries): Permiten la adaptación de los estilos de fuente basándose en anchos de pantalla específicos.
- Unidades de ventana gráfica (Viewport Units): Como
vwyvh, que dimensionan fuentes en relación con las dimensiones de la ventana del navegador. - Longitud de línea y legibilidad: Ajustar el número de caracteres por línea y el espaciado vertical (
line-height) para evitar textos apretados o demasiado espaciados. - Jerarquía clara: Garantizar que los títulos y el cuerpo de texto estén bien diferenciados en pantallas pequeñas.
- Accesibilidad: Considerar el contraste entre texto y fondo y permitir ajustes flexibles de tamaño.
Conclusión
Las propiedades de fuente CSS son bloques fundamentales en el desarrollo de interfaces. Dado que la mayor parte del contenido web es textual, dominar estas propiedades es esencial para garantizar una apariencia de alta calidad, buena legibilidad y escalabilidad.
Algunas propiedades funcionan fácilmente con cualquier fuente, pero otras requieren fuentes que admitan variaciones específicas. Por ejemplo, la fuente Inconsolata cuenta con 8 variaciones de peso, mientras que otras pueden tener solo normal y bold.
Si necesita una fuente pero no la tiene instalada, puede intentar buscarla y descargarla utilizando las aplicaciones gratuitas de Aspose. Además, el Visor de fuentes le proporcionará la información técnica necesaria que pueda requerir durante su desarrollo.