Lista de fuentes personalizadas
El texto PDF y el menú de fuentes del editor usan dos fuentes de datos relacionadas, pero distintas.
| Fuente | Qué controla |
|---|---|
document.assets.fonts y el fontId de un fragmento | Metadatos y recursos de fuentes PDF importadas que reconstruyen el contenido nativo. |
fontFamily de un fragmento editable | La familia CSS utilizada para componer y renderizar texto editable. |
| La lista de fuentes compartida de Univer | Las opciones del selector de fuentes del inspector PDF. |
Añadir una opción a la lista compartida no crea un recurso en document.assets.fonts ni descarga o incrusta un archivo de fuente.
Configurar la lista del editor
Cuando editor.enabled es true, el inspector PDF usa el FontFamilyDropdown compartido. Configura su lista en UniverUIPlugin:
import { UniverUIPlugin } from '@univerjs/ui'univer.registerPlugin(UniverUIPlugin, { container: 'app', customFontFamily: { list: [ { value: 'Inter', label: 'Inter', category: 'sans-serif' }, { value: 'Noto Serif', label: 'Noto Serif', category: 'serif' }, ], override: false, },})Carga cada fuente del navegador mediante @font-face o una hoja de estilos. De lo contrario, Canvas usa una fuente de reserva del navegador.
Añadir opciones en tiempo de ejecución
Después de cargar la Facade de UI, añade opciones a la misma lista compartida con addFonts:
univerAPI.addFonts([ { value: 'Inter', label: 'Inter', category: 'sans-serif' },])Esto solo actualiza la lista de la aplicación; no carga los bytes de la fuente ni reescribe fragmentos PDF existentes.
Aplicar una fuente a texto PDF editable
Pasa fontFamily al insertar texto o actualiza un cuadro de texto mediante la Facade PDF:
const page = univerAPI.getActivePdf()?.getPageByIndex(0)const textBox = page?.insertTextBox({ text: 'Hello PDF', fontFamily: 'Inter', fontSize: 14, left: 36, top: 36,})textBox?.setTextStyle({ fontFamily: 'Noto Serif' })El texto nativo importado que devuelve page.getTextSpans() es una instantánea y no se puede estilizar directamente. Usa replaceText(...) para convertirlo en un cuadro editable antes de llamar a setTextStyle.
¿Cómo es esta guía?