Fuentes

Text usa la fuente del sistema (San Francisco en iOS, Roboto en Android) salvo que una familia de fuentes indique otra cosa (.font_family(..) en Rust, fontFamily en TSX). Una familia puede ser una familia genérica, una fuente instalada en el dispositivo o un archivo de fuente que se incluye con la app.

#Familias del sistema y genéricas

La fuente del sistema admite todos los pesos del 100 al 900. Las clases font-sans, font-serif y font-mono de Tailwind corresponden a las tres primeras filas, y font-sans y font-mono a las fuentes del tema cuando este las define (Una fuente predeterminada para la app).

Una familia instalada en el dispositivo se puede nombrar directamente ("Georgia", "Avenir Next" en iOS). Las fuentes instaladas difieren entre plataformas y versiones, así que incluye con la app las fuentes de las que dependa tu diseño. En iOS, una familia que no existe recurre a la fuente del sistema y registra una advertencia en el log (font family 'X' is not available); indica una lista para elegir qué se usa en su lugar (Listas de fuentes alternativas).

#Incluir una fuente en la app

Un crate de Rust incluye los archivos de su directorio assets/: registry.assets(assets!()) en su función #[native_module] los incluye todos, y asset!("fonts/Pacifico-Regular.ttf") es un FontAsset cuyo family es el nombre de familia de la fuente, leído del archivo cuando se compila el crate. En TSX, importa un archivo .ttf, .otf, .woff o .woff2: la importación se evalúa como el nombre de familia de la fuente. En ambos casos la fuente se registra antes del primer fotograma, de modo que está lista cuando el texto se renderiza por primera vez. Los archivos WOFF y WOFF2 son fuentes TrueType u OpenType comprimidas (un archivo WOFF2 suele pesar la mitad que su equivalente TrueType, un ahorro tanto en el paquete de la app como en las descargas de la web): NSH los lee como las fuentes que contienen, en todas las plataformas:

use nsh_core::{element::FontAsset, prelude::*};

const PACIFICO: FontAsset = asset!("fonts/Pacifico-Regular.ttf");

#[native_module("app/native")]
fn native(registry: &mut Registry) {
    registry.assets(assets!());
}

text("Custom fonts").font_family(PACIFICO.family).text_size(px(30.0))

import { Text } from "nsh";
import Pacifico from "./fonts/Pacifico-Regular.ttf";

<Text style={{ fontFamily: Pacifico, fontSize: 30 }}>Custom fonts</Text>

PACIFICO.family y la importación de TSX Pacifico son la cadena "Pacifico": el nombre de familia almacenado en el archivo de la fuente (su nombre de familia tipográfico o, en su defecto, su nombre de familia), no el nombre del archivo. Usar el valor del recurso en lugar de escribir el nombre a mano mantiene ambos sincronizados; un archivo ausente o dañado hace fallar la compilación de Rust, y un archivo importado queda incluido con seguridad en el paquete.

Los archivos se incluyen con la app como cualquier otro recurso. Las fuentes se registran solo para el proceso de la app; no se instalan en el dispositivo.

#Listas de fuentes alternativas

fontFamily admite una lista, como CSS: familias separadas por comas, la preferida primero, con el nombre entre comillas o sin ellas si contiene espacios ("Brand, 'Noto Sans SC', sans-serif"), y un nombre entre comillas conserva sus comas ('ACME, Inc'). El texto se compone con la primera familia que tenga la plataforma, y un carácter que esa familia no tenga (otro sistema de escritura, un símbolo) se toma de la siguiente familia de la lista que lo tenga y, después, de las fuentes alternativas del sistema. Una lista permite que una fuente de marca que solo cubre el alfabeto latino muestre el chino con una fuente a juego, o indicar una fuente que la app descarga junto con una fuente del sistema que se muestre hasta que llegue:

text("Brand 品牌").font_family("Brand, 'Noto Sans SC', sans-serif")

<Text style={{ fontFamily: "Brand, 'Noto Sans SC', sans-serif" }}>Brand 品牌</Text>

Cada plataforma conserva el orden de la lista con su propia maquinaria de fuentes: una lista en cascada en iOS y macOS, una alternativa de fuentes en Windows (una por párrafo: la lista de su primer estilo), una lista de familias de Pango en Linux, la del navegador en la web y las alternativas de GPUI. En Android, el texto se compone con la primera familia que tenga; cuando esa es una fuente que registra la app, las fuentes registradas que la siguen en la lista son sus alternativas (Android 10 y posteriores).

#Pesos y cursivas

Una familia suele venir en varios archivos, uno por cada peso y estilo. Incluye cada uno (colócalos en assets/ en Rust, impórtalos uno a uno en TSX); se registran con el mismo nombre de familia, y el peso y el estilo eligen la variante:

// assets/fonts: Inter-Regular.ttf, Inter-Medium.ttf, Inter-Bold.ttf, Inter-Italic.ttf
const INTER: FontAsset = asset!("fonts/Inter-Regular.ttf");

text("Regular, ")
    .font_family(INTER.family)
    .text_size(px(16.0))
    .child(text("medium").font_weight(FontWeight::MEDIUM))
    .child(", ")
    .child(text("bold").font_weight(FontWeight::BOLD))
    .child(" and ")
    .child(text("italic").italic())
    .child(".")

import { Text } from "nsh";
import Inter from "./fonts/Inter-Regular.ttf";
import "./fonts/Inter-Medium.ttf";
import "./fonts/Inter-Bold.ttf";
import "./fonts/Inter-Italic.ttf";

const body = { fontFamily: Inter, fontSize: 16 } as const;

<Text style={body}>
  Regular, <Text style={{ fontWeight: "500" }}>medium</Text>, <Text style={{ fontWeight: "bold" }}>bold</Text> and{" "}
  <Text style={{ fontStyle: "italic" }}>italic</Text>.
</Text>

Cuando ninguna variante registrada tiene exactamente el peso solicitado, se usa la más cercana. Las plataformas se comportan de forma distinta cuando falta una variante:

Incluye las variantes que uses para obtener el mismo resultado en ambas.

#Fuentes en estilos tipados y clases de Tailwind

En Rust, .font_family(..) acepta la familia del recurso dondequiera que vaya un estilo, y los métodos de peso (.font_weight(FontWeight::SEMIBOLD)) seleccionan las variantes. Para las clases, nombra tus familias en el tema de Tailwind en nsh.json para usarlas como clases font-*:

{
  "tailwind": {
    "fontFamily": { "display": "Pacifico", "body": "Inter" }
  }
}

use nsh_core::element::palette::VIOLET;

text("Custom fonts").font_family(PACIFICO.family).text_3xl().text_color(VIOLET.shade(600))
text("Bold Inter").font_family(INTER.family).font_weight(FontWeight::BOLD)

import { Text } from "nsh";
import "./fonts/Pacifico-Regular.ttf";
import "./fonts/Inter-Regular.ttf";
import "./fonts/Inter-Bold.ttf";

<Text class="font-display text-3xl text-violet-600">Custom fonts</Text>
<Text class="font-body font-bold">Bold Inter</Text>

Una familia arbitraria funciona sin una entrada en el tema: font-[Pacifico]. Las clases de peso (font-light, font-semibold, font-bold, …) seleccionan variantes igual que fontWeight. Los estilos de texto en una vista se transmiten a los textos que contiene, de modo que .font_family(INTER.family) en una vista, o <View class="font-body">, establece la familia de toda una pantalla.

#Una fuente predeterminada para la app

font-sans del tema es la fuente de la app: todo texto que no define una familia propia se dibuja con ella, tanto en componentes de Rust como en TSX, igual que una página web con --font-sans de Tailwind. font-mono es la fuente monoespaciada, de la clase font-mono y del código en TextView. Defínelas en el tema de la app ("theme" en nsh.json, Rust) e incluye los archivos de fuente como se indicó antes:

{
  "cssVars": {
    "theme": {
      "font-sans": "Inter, sans-serif",
      "font-mono": "JetBrains Mono, monospace"
    }
  }
}

La primera familia de la lista que no sea genérica es la fuente; una primera familia genérica (system-ui, sans-serif) es la fuente del sistema. La fuente también se puede definir en un contenedor: los textos que contiene la heredan.

#[component]
pub fn Root() -> impl IntoElement {
    view().flex_1().font_family(INTER.family).child(app())
}

mount(() => (
  <View class="flex-1 font-body">
    <App />
  </View>
));

#Características de la fuente

fontVariant activa características OpenType de la fuente: "tabular-nums", "proportional-nums", "lining-nums", "oldstyle-nums" y "small-caps" (.tabular_nums(), .small_caps(), … en Rust; Text). La fuente debe contenerlas; las fuentes del sistema las contienen.

#Véase también

• Text: estilos de texto, tamaños y el ajuste del tamaño de texto del sistema.
• Tailwind: las claves del tema.
• Imágenes y recursos: cómo se incluyen los archivos de la app.