Gracias por seguir Google I/O. Mira contenido a pedido.

Se usó la API de Cloud Translation para traducir esta página.

Texto y tipografía

Podcast de CSS - 036: Texto y Tipografía

El texto es uno de los componentes básicos de la Web.

Cuando creas un sitio web, no necesariamente necesitas aplicar un estilo a tu texto; HTML tiene un estilo predeterminado bastante razonable.

Sin embargo, es probable que el texto constituya la mayor parte de tu sitio web, por lo que vale la pena agregar un poco de estilo para mejorarlo. Si cambias algunas propiedades básicas, puedes mejorar significativamente la experiencia de lectura para tus usuarios.

En este módulo, comenzaremos con la regla @font-face, que te permite importar fuentes personalizadas en tus páginas web. Esto garantiza que tengas la tipografía exacta que necesitas, independientemente de las fuentes instaladas por el usuario.

Luego, veremos las propiedades esenciales de fuentes de CSS, incluidas las siguientes: font-family, font-style, font-weight y font-size. Estos conceptos básicos la etapa de manipulación del texto para mejorar el estilo y la legibilidad.

También veremos las propiedades específicas de los párrafos, como text-indent y word-spacing, antes de concluir con temas avanzados, como las fuentes variables y seudoelementos, que perfeccionan aún más tu control tipográfico.

Se proporcionarán ejemplos prácticos y consejos para consolidar su comprensión y aplicación de estas técnicas de CSS.

La regla `@font-face`

La regla-at de CSS @font-face es fundamental en el diseño web, ya que te permite especificar y usa fuentes personalizadas para mostrar texto. La belleza de @font-face yace en su versatilidad: le permite obtener fuentes de un servidor remoto o de una fuente instalada en el dispositivo del usuario.

Sintaxis

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

Descriptores

ascent-override: Personaliza la métrica de ascenso, lo que afecta el espacio sobre el modelo de referencia.
descent-override: Ajusta la métrica de descenso, lo que afecta el espacio debajo del modelo de referencia.
font-display: Controla el comportamiento de visualización de la fuente según su estado de descarga.
font-family: Asigna un nombre a la fuente para usarla en las propiedades relacionadas con la fuente.
font-stretch: Establece un escalamiento horizontal aceptable, especificado como un solo valor o rango.
font-style: Define el estilo de fuente y admite rangos de ángulos para estilos oblicuos.
font-weight: Determina el grosor de la fuente o el rango de grosores disponibles.
font-feature-settings: Permite el acceso a las funciones de fuentes de OpenType.
font-variation-settings: Proporciona un control más preciso sobre la configuración de las fuentes variables.
line-gap-override: Anula el intervalo de líneas predeterminado de la fuente.
size-adjust: Aplica un factor de escala al contorno y las métricas de la fuente.
src: Define la fuente de la fuente, ya sea local o remota. Esto es necesario para Regla @font-face. Combinar url() y local() en src es una estrategia común que usa una fuente local si está disponible y revierte a un archivo de fuente remoto como resguardo. Los navegadores priorizan los recursos en función del orden de declaración. Por lo tanto, local() normalmente debe preceder a url().
unicode-range: Limita los caracteres para los que se debe usar esta fuente.

Descripción

@font-face libera a los diseñadores de las restricciones de lo "seguro para la Web". fuentes de lo que les permite usar una tipografía personalizada. La capacidad de la función local() para buscar para una fuente en el dispositivo del usuario ofrece una experiencia perfecta que no depender necesariamente de una conexión a Internet.

Tipos de MIME de la fuente

Formato	Tipo de MIME
TrueType	`font/ttf`
OpenType	`font/otf`
Formato de fuente abierta web	`font/woff`
Formato de fuente abierta web 2	`font/woff2`

Diferencias entre @font-face y font-family

En CSS, @font-face y font-family suelen confundirse, pero se publican con propósitos distintos.

Como vimos, @font-face es una regla que se usa para definir las fuentes personalizadas que usar en tu aplicación web. Le indica al navegador dónde descargar la fuente, cómo mostrarla durante la carga (con la propiedad font-display) y especifica qué subconjunto de caracteres descargar (con unicode-range).

Por el contrario, font-family es una propiedad de CSS que se usa dentro de una regla de CSS para asignar un una fuente determinada o una lista de fuentes a un elemento. Las fuentes que aparecen font-family pueden ser fuentes seguras para la Web, fuentes del sistema o fuentes personalizadas definidas con @font-face

En resumen, @font-face declara una fuente y le asigna un nombre. font-family aplica esta fuente declarada a elementos HTML.

Este es un ejemplo de uso de ambos:

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

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

En este ejemplo, @font-face define "CustomFont" y le indica al navegador dónde para encontrarlo. Luego, la propiedad font-family la aplica al elemento del cuerpo. con Arial como resguardo si "CustomFont" no está disponible.

Cambiar el tipo de letra

Navegadores compatibles

Texto y tipografía

Podcast de CSS - 036: Texto y Tipografía

La regla @font-face

Sintaxis

Descriptores

Descripción

Tipos de MIME de la fuente

Diferencias entre @font-face y font-family

Cambiar el tipo de letra

Usar fuentes cursivas y oblicuas

Aplicar negrita al texto

Cómo cambiar el tamaño del texto

Cambiar el espacio entre las líneas

Cómo cambiar el espacio entre caracteres

Cambiar el espacio entre palabras

Abreviatura de font

Cómo cambiar las mayúsculas y minúsculas del texto

Cómo agregar al texto subrayados, sobrelíneas y líneas directas

Cómo agregar una sangría al texto

Cómo manejar el contenido oculto o desbordado

Controlar los espacios en blanco

Controla cómo se rompen las palabras

Cambiar la alineación del texto

Cómo cambiar la dirección del texto

Cambia el flujo del texto

Cómo cambiar la orientación del texto

Cómo agregar una sombra al texto

Fuentes variables

Pseudoelementos

Seudoelementos ::first-letter y ::first-line

Seudoelemento ::selection

font-variant

Verifica tus conocimientos

Recursos

La regla `@font-face`

Abreviatura de `font`

Seudoelementos `::first-letter` y `::first-line`

Seudoelemento `::selection`