Las fuentes juegan un papel importante en la representación visual de aplicaciones   e informes basados en web. De forma predeterminada, JavaScript permite a los desarrolladores personalizar aspectos como el tamaño, el peso y el estilo de la fuente e incluso incluir tipos de fuente personalizados. La capacidad de los desarrolladores para trabajar y personalizar fuentes les permite mejorar tanto la estética como la legibilidad de la información que presentan. JavaScript  Para igualar la flexibilidad de JavaScript, ActiveReportsJS permite a los usuarios personalizar en gran medida el texto de los informes. En este artículo, nos centraremos en cómo aprovechar la capacidad de ActiveReportsJS Designer para personalizar fuentes y cubriremos los siguientes temas:  Los conceptos básicos de las fuentes  Configuración de la aplicación de diseñador independiente  Configuración de aplicaciones basadas en ActiveReportsJS  Configuración del componente Diseñador de informes  Los conceptos básicos de las fuentes  Todos los componentes de ActiveReportsJS operan dentro de un entorno de navegador web:  El   está creado con   , que utiliza Chromium para mostrar la interfaz de usuario. Diseñador de informes independiente Electron  Los componentes   y   son partes de una aplicación web que se ejecuta en el navegador de la máquina de un usuario. JavaScript Report Viewer Designer  Los filtros de exportación de PDF, datos tabulares y HTML utilizan un entorno de navegador web para medir el contenido del informe.  Un informe típico consta de contenido textual que el navegador representa mediante formas llamadas glifos. Los recursos de fuentes contienen información que asigna códigos de caracteres a glifos que representan estos caracteres. Por lo tanto, los navegadores necesitan acceso a los recursos de fuentes para mostrar el texto como se esperaba.  Todo el contenido textual en ActiveReportsJS tiene varias propiedades de fuente, que incluyen:    : el ID de la fuente, es decir, Arial, Calabri o Times New Roman. Familia de fuentes    : Normal o cursiva. Estilo de fuente    : Delgada, Extraligera, Normal, Mediana, Seminegrita, Negrita, Extranegrita, Pesada. Peso de fuente  Una combinación única de estas tres propiedades se denomina   . Una familia de fuentes normalmente consta de varias fuentes, que (normalmente) están representadas por varios archivos. Font Face  Por ejemplo, la familia de fuentes   tiene seis tipos de fuentes diferentes:  Calibri  Cuando ActiveReportsJS genera un informe, traduce estas propiedades de fuente a propiedades de estilo CSS de familia de fuentes, estilo de fuente y peso de fuente. Se basa en un navegador para resolver los recursos de fuentes asociados y extraer los glifos necesarios. El navegador tiene dos formas de acceder a los recursos de fuentes; localmente, en el sistema que ejecuta un navegador o mediante descarga.  Los recursos de fuentes descargables son fáciles de mantener; Todos los navegadores modernos los admiten y garantiza la salida consistente de contenido textual en todos los entornos. Además, ActiveReportsJS PDF Export requiere fuentes descargables porque incrusta sus subconjuntos en un documento PDF. Por lo tanto, la mejor manera de garantizar una producción de informes coherente en todos los entornos es configurar los componentes ActiveReportsJS para acceder a recursos de fuentes descargables.  Antes de comenzar, debemos decidir qué familias de fuentes queremos utilizar para nuestros informes. Podrían ser fuentes estándar como Arial, Times New Roman o Helvetica. O podría ser cualquier cantidad de fuentes web. Para nuestro ejemplo, usaremos la fuente Montserrat; Esta es la misma fuente que utilizamos para nuestros informes de demostración.  En cualquier caso, asegúrese de tener todos los archivos de fuentes para todas las familias de fuentes que planea usar. ActiveReportsJS admite los siguientes formatos de fuente:   Configurar el Diseñador de informes independiente  Para agregar una familia de fuentes al diseñador independiente, primero deberá navegar a la carpeta que contiene el archivo de configuración de fuentes ActiveReportsJS. Estos se encuentran en las siguientes ubicaciones, según su sistema operativo:    : %AppData%\ActiveReportsJS Designer\fontsConfig.json Windows    : ~/Biblioteca/Soporte de aplicaciones/ActiveReportsJS Designer/fontsConfig.json macOS    : ~/.config/ActivereportsJS Designer/fontsConfig.json Linux  En esta ubicación, cree una carpeta llamada   y copie todos los archivos de todas las fuentes que planea usar en esta carpeta. Fuentes  Luego, abra el archivo   en el editor de texto de su elección. Este archivo contiene descriptores de tipos de fuentes que el autor de un informe utilizará para el contenido textual. En la propiedad   , especifique la ruta absoluta a la carpeta principal del directorio   . Reemplace los elementos predeterminados de la matriz de descriptores con los descriptores de las fuentes deseadas. fontsConfig.json de ruta de fuentes  Cada descriptor incluye las siguientes propiedades:   Por ejemplo, para permitir las caras Regular, Cursiva y Negrita de la fuente   , utilizaría los siguientes descriptores: Montserrat   { "name": "Montserrat", "weight": "400", "style": "normal", "source": "Fonts/Montserrat/Montserrat-Regular.ttf" }, { "name": "Montserrat", "weight": "400", "style": "italic", "source": "Fonts/Montserrat/Montserrat-Italic.ttf" }, { "name": "Montserrat", "weight": "700", "style": "normal", "source": "Fonts/Montserrat/Montserrat-Bold.ttf" }  Ejecute la aplicación de diseño independiente, agregue un cuadro de texto en el cuerpo de un informe y asegúrese de que puede establecer su propiedad   en una de las fuentes que enumeró en el archivo   y que todas las fuentes se muestran correctamente. Familia de fuentes fontsConfig.json  Configuración de aplicaciones basadas en ActiveReportsJS  Una aplicación que muestra informes en el visor de informes de JavaScript, exporta informes a un PDF o aloja el componente del diseñador de informes debe usar la misma configuración que creó para la aplicación de diseño independiente. La forma más sencilla de lograrlo es copiar la carpeta   y el archivo   a la carpeta de activos estáticos de su aplicación. Fuentes fontsConfig.json  Esta carpeta varía según los diferentes marcos de aplicaciones para el usuario. Aquí están algunos ejemplos:    : utiliza la configuración de activos; Si la carpeta   y el archivo   se copian en la carpeta de activos, modifique las propiedades de origen de los descriptores de fuentes en el archivo   para que comiencen con los activos. Por ejemplo: Angular Fuentes fontsConfig.json fontsConfig.json  { "nombre": "Montserrat", "peso": "900", "estilo": "italic", "fuente": "assets/Fonts/Montserrat/Montserrat-BlackItalic.ttf" }    : utiliza la carpeta pública para aplicaciones creadas con create-react-app. React    : utiliza el manejo de activos estáticos. Vue  Finalmente, la aplicación debe llamar al método   del objeto FontStore con la URL del archivo   . Este código debe ejecutarse antes de que la aplicación comience a mostrar o exportar informes. Tenga en cuenta que el método   es asíncrono y devuelve un objeto   . RegisterFonts fontsConfig RegisterFonts Promise  El código que llama a este método también puede esperar hasta que la Promesa devuelta se resuelva antes de cargar informes en el componente del visor o exportarlos.  Para aplicaciones de JavaScript puro, el código se verá así:   <script src="https://cdn.grapecity.com/activereportsjs/2.2.0/dist/ar-js-core.js"></script> <script> GC.ActiveReports.Core.FontStore.registerFonts( "/resources/fontsConfig.json" // replace the URL with the actual one ) </script>  Para aplicaciones   ,   y Vue: Angular React   import { Core } from "@grapecity/activereports"; Core.FontStore.registerFonts("/assets/fontConfig.json") // replace the URL with the actual one  Puede encontrar ejemplos de este código en nuestras   . demostraciones en vivo  Configuración del componente Diseñador de informes  Finalmente, para asegurarse de que el componente del diseñador de informes muestre solo las fuentes registradas, establezca la propiedad   de la instancia del diseñador en registrada. fontSet  Además, si desea asegurarse de que los elementos del informe recién agregados tengan una de las fuentes registradas de forma predeterminada, puede utilizar la función   . Plantilla de inicio personalizada  Conclusión  Y con esto llegamos al final del artículo. Como hemos comentado, las fuentes son una forma poderosa para que los desarrolladores mejoren la estética y la legibilidad. En este artículo, mostramos lo fácil que es incorporar fuentes personalizadas en sus informes a través del Visor y Diseñador de informes ActiveReportsJS.  ¡Feliz codificación!  También publicado   . aquí

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This writer has a vested interest be it monetary, business, or otherwise, with 1 or more of the products or companies mentioned within.

Learn More About MESCIUS' Line of Products!

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Make resilience your competitive advantage

Utilizar fuentes personalizadas en informes JavaScript

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

La fuga rápida del sistema Claude Sonnet 3.5: un análisis forense

Telegram: el puente de Crypto Island hacia el continente

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

La fuga rápida del sistema Claude Sonnet 3.5: un análisis forense

Telegram: el puente de Crypto Island hacia el continente

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps