Fuentes CSS

En los albores de la web, solo tenía un puñado de fuentes entre las que podía elegir.

Afortunadamente, hoy puedes cargar cualquier tipo de fuente en tus páginas.

CSS ha ganado muchas capacidades interesantes a lo largo de los años en lo que respecta a las fuentes.

losfontproperty es la abreviatura de varias propiedades:

• font-family
• font-weight
• font-stretch
• font-style
• font-size

Veamos cada uno de ellos y luego cubriremosfont.

Luego hablaremos sobre cómo cargar fuentes personalizadas, usando@importo@font-faceo cargando una hoja de estilo de fuente.

font-family

Establece la fuentefamiliaque utilizará el elemento.

¿Por qué "familia"? Porque lo que conocemos como fuente en realidad se compone de varias subfuentes. que aportan todo el estilo (negrita, cursiva, claro ...) que necesitamos.

Aquí hay un ejemplo de la aplicación Font Book de mi Mac: la familia de fuentes Fira Code alberga varias fuentes dedicadas debajo:

Esta propiedad le permite seleccionar una fuente específica, por ejemplo:

body {
  font-family: Helvetica;
}

Puede establecer varios valores, por lo que la segunda opción se usará si la primera no se puede usar por algún motivo (si no se encuentra en la máquina o la conexión de red para descargar la fuente falló, por ejemplo):

body {
  font-family: Helvetica, Arial;
}

Usé algunas fuentes específicas hasta ahora, las que llamamosFuentes web seguras, ya que están preinstalados en diferentes sistemas operativos.

Los dividimos en fuentes Serif, Sans-Serif y Monospace. Aquí hay una lista de algunos de los más populares:

Serif- Georgia - Palatino - Times New Roman - Times

Sans-Serif- Arial - Helvetica - Verdana - Ginebra - Tahoma - Lucida Grande - Impact - Trebuchet MS - Arial Black

Monoespacio- Courier New - Courier - Consola Lucida - Mónaco

Puede usar todos esos comofont-familypropiedades, pero no se garantiza que estén allí para todos los sistemas. También existen otros con un nivel de apoyo variable.

También puede utilizar nombres genéricos:

• sans-serifuna fuente sin ligaduras
• serifuna fuente con ligaduras
• monospaceuna fuente especialmente buena para código
• cursiveutilizado para simular piezas escritas a mano
• fantasyEl nombre lo dice todo

Aquellos se utilizan normalmente al final de unfont-familydefinición, para proporcionar un valor de reserva en caso de que no se pueda aplicar nada más:

body {
  font-family: Helvetica, Arial, sans-serif;
}

font-weight

Esta propiedad establece el ancho de una fuente. Puede utilizar esos valores predefinidos:

• normal
• negrita
• negrita (relativo al elemento padre)
• más ligero (relativo al elemento padre)

O usando las palabras clave numéricas

• 100
• 200
• 300
• 400, asignado anormal
• 500
• 600
• 700 asignados abold
• 800
• 900

donde 100 es la fuente más clara y 900 es la más audaz.

Es posible que algunos de esos valores numéricos no se correspondan con una fuente, ya que deben proporcionarse en la familia de fuentes. Cuando falta uno, CSS hace que ese número sea al menos tan negrita como el anterior, por lo que es posible que tenga números que apunten a la misma fuente.

font-stretch

Permite elegir una cara estrecha o ancha de la fuente, si está disponible.

Esto es importante: la fuente debe estar equipada con diferentes caras.

Los valores permitidos son, de más estrecho a más amplio:

• ultra-condensed
• extra-condensed
• condensed
• semi-condensed
• normal
• semi-expanded
• expanded
• extra-expanded
• ultra-expanded

font-style

Le permite aplicar un estilo en cursiva a una fuente:

p {
  font-style: italic;
}

Esta propiedad también permite los valoresobliqueynormal. Hay muy poca, si es que hay alguna, diferencia entre usaritalicyoblique. El primero es más fácil para mí, ya que HTML ya ofrece unaielemento que significa cursiva.

font-size

Esta propiedad se utiliza para determinar el tamaño de las fuentes.

Puede pasar 2 tipos de valores:

1. un valor de longitud, comopx,em,remetc, o un porcentaje
2. una palabra clave de valor predefinido

En el segundo caso, los valores que puede utilizar son:

• xx-pequeño
• x-pequeño
• pequeño
• medio
• grande
• x-grande
• xx-grande
• más pequeño (relativo al elemento padre)
• más grande (en relación con el elemento padre)

Uso:

p {
  font-size: 20px;
}
li {
font-size: medium;
}

font-variant

Esta propiedad se usó originalmente para cambiar el texto a versalitas y tenía solo 3 valores válidos:

• normal
• inherit
• small-caps

Minúsculas significa que el texto se representa en "minúsculas" junto a sus letras mayúsculas.

font

losfontLa propiedad le permite aplicar diferentes propiedades de fuente en una sola, reduciendo el desorden.

Debemos establecer al menos 2 propiedades,font-sizeyfont-family, los demás son opcionales:

body {
  font: 20px Helvetica;
}

Si agregamos otras propiedades, deben colocarse en el orden correcto.

Este es el orden:

font: <font-stretch> <font-style> <font-variant> <font-weight> <font-size> <line-height> <font-family>;

Ejemplo:

body {
  font: italic bold 20px Helvetica;
}
section {
font: small-caps bold 20px Helvetica;
}

Cargando fuentes personalizadas usando@font-face

@font-facele permite agregar un nuevo nombre de familia de fuentes y asignarlo a un archivo que contiene una fuente.

Esta fuente será descargada por el navegador y utilizada en la página, y ha sido un cambio fundamental en la tipografía en la web; ahora podemos usar cualquier fuente que queramos.

Podemos agregar@font-facedeclaraciones directamente en nuestro CSS, o enlace a un CSS dedicado a importar la fuente.

En nuestro archivo CSS también podemos usar@importpara cargar ese archivo CSS.

A@font-faceLa declaración contiene varias propiedades que usamos para definir la fuente, incluyendosrc, el URI (uno o más URI) de la fuente. Esto sigue la política del mismo origen, lo que significa que las fuentes solo se pueden descargar desde el origen actual (dominio + puerto + protocolo).

Las fuentes suelen estar en los formatos

• woff(Formato de fuente abierto web)
• woff2(Formato de fuente abierto web 2.0)
• eot(Tipo abierto integrado)
• otf(Fuente OpenType)
• ttf(Fuente TrueType)

Las siguientes propiedades nos permiten definir las propiedades de la fuente que vamos a cargar, como vimos anteriormente:

• font-family
• font-weight
• font-style
• font-stretch

Una nota sobre el rendimiento

Por supuesto, cargar una fuente tiene implicaciones de rendimiento que debes considerar al crear el diseño de tu página.

Más tutoriales de CSS:

• La guía de Flexbox
• Tutorial de cuadrícula CSS
• Variables CSS (propiedades personalizadas)
• Introducción a PostCSS
• La propiedad de margen CSS
• Cómo centrar un elemento con CSS
• Fuentes del sistema CSS
• Cómo imprimir tu HTML con estilo
• Una guía introductoria a las transiciones CSS
• Un tutorial de animaciones CSS
• Introducción a CSS
• La guía CSS
• Cómo configurar Tailwind con PurgeCSS y PostCSS
• La hoja de trucos de Tailwind
• Cómo rotar continuamente una imagen usando CSS
• Hacer que una tabla responda usando CSS
• Cómo depurar CSS biseccionando
• Selectores CSS
• Cascada CSS
• Especificidad CSS
• Selectores de atributos CSS
• Colores CSS
• Unidades CSS
• URL de CSS ()
• Tipografía CSS
• El modelo de caja CSS
• La propiedad de posición CSS
• Consultas de medios CSS y diseño receptivo
• Consultas de funciones CSS
• Transformaciones CSS
• Cómo diseñar listas usando CSS
• Prefijos de proveedores de CSS
• Herencia CSS
• Pseudoclases CSS
• Pseudoelementos CSS
• Diseñar tablas HTML con CSS
• La propiedad de visualización de CSS
• La función CSS calc ()
• Bordes CSS
• Importando un archivo CSS usando @import
• Manejo de errores CSS
• Filtros CSS
• Tamaño de caja CSS
• Fondos CSS
• Comentarios CSS
• Fuentes CSS
• Relleno CSS
• La propiedad flotante de CSS y su compensación
• Normalización de CSS
• La propiedad de índice z de CSS
• Cómo deshabilitar la selección de texto usando CSS
• Cómo poner un elemento en la parte inferior de su contenedor usando CSS
• Cómo invertir colores usando CSS
• Etiquetas previas receptivas en CSS
• Incrustaciones de video de YouTube receptivas
• ¿Cuáles son los buenos valores de CSS Breakpoint para Responsive Design?
• Cómo alinear el centro en flexbox