Elysia Tools
Navegación
Workflow Playbook
Comprueba cobertura de caracteres, combina títulos y cuerpo con texto real, configura ejes variables y entrega CSS adaptable con alternativas verificadas.
Temas
Este recorrido ayuda a entregar la tipografía de una página multilingüe. Reúne un título largo, un párrafo, cantidades, nombres acentuados y signos propios de cada idioma. Para archivos propios, font-file-inspector permite conservar metadatos y cobertura junto con la versión y los pesos necesarios. Un bloque Unicode cubierto no demuestra que cada carácter y secuencia se dibuje correctamente. Registra el origen autorizado del archivo y revisa aparte sus condiciones de uso. Si aparecen caracteres invisibles o códigos inesperados, consulta unicode-emoji-debugging.
webfont-pairing-lab carga las familias de Google Fonts de su catálogo y genera la importación de los pesos elegidos. Para una familia propia, usa font-pairing-preview-card después de cargarla en la página anfitriona. La tarjeta no descarga archivos por su nombre. Una combinación bonita podría estar mostrando una fuente instalada distinta; confirma la fuente realmente utilizada en la página final. Mantén el mismo texto al ajustar tamaño e interlineado e incluye títulos largos para descubrir saltos demasiado apretados.
Si hay ejes fvar, variable-font-axis-instance-and-css-font-variation-settings-builder muestra instancias y permite comparar coordenadas admitidas. Usa las propiedades CSS de alto nivel que expresen bien la elección y sustituye las referencias de la vista previa por la URL del archivo desplegado. Para fuentes estáticas, indica qué archivo proporciona cada peso. Una negrita sintetizada por el navegador no prueba que se haya cargado el peso deseado. Conserva identidad del archivo, pila y coordenadas para que otra persona reproduzca el resultado.
Con css-fluid-typography-clamp-calc calcula los límites de tamaño entre ventanas acordadas. Aplica la fórmula y prueba ambos extremos y un ancho intermedio. Aumenta el zoom y desactiva la carga de fuentes para observar saltos, etiquetas y recortes. Entrega CSS, recursos, ejemplos por idioma, anchos probados y defectos pendientes. Los conflictos de reglas corresponden a css-authoring-layout-and-cascade-workflows; la revisión más amplia de accesibilidad continúa en web-accessibility-audits.
Guía de flujo de trabajo
Examina el archivo, sus estilos y ejes; contrasta la cobertura Unicode con texto real y enumera caracteres que necesitan alternativa.
Usa el laboratorio para familias alojadas o la tarjeta para una pila CSS ya cargada; mantén el texto y compara pesos e interlineado.
Revisa instancias y límites, previsualiza coordenadas y exporta CSS. Si la fuente es estática, conserva sus archivos de peso y omite los ejes.
Genera clamp para las ventanas acordadas, aplica el CSS y comprueba manualmente carga real, saltos, zoom y fuentes alternativas.
Usa el laboratorio para sus familias de Google Fonts y el inspector para archivos. Escribir una familia en la tarjeta no descarga su fuente.
Usa el constructor solo si el archivo contiene ejes fvar; una fuente estática requiere los archivos de peso correspondientes.
Comprueba cobertura y alternativa real; analiza puntos de código sospechosos con unicode-emoji-debugging antes de cambiar de fuente.