As fontes desempenham um papel importante na representação visual de aplicativos   e relatórios baseados na web. Por padrão, o JavaScript permite que os desenvolvedores personalizem itens como tamanho, espessura e estilo da fonte e até incluam tipos de fonte personalizados. A capacidade dos desenvolvedores de trabalhar e personalizar fontes permite aprimorar a estética e a legibilidade das informações que apresentam. JavaScript  Para corresponder à flexibilidade do JavaScript, o ActiveReportsJS permite que os usuários personalizem fortemente o texto dos relatórios. Neste artigo, focaremos em como você pode aproveitar a capacidade do ActiveReportsJS Designer de personalizar fontes, abordando os seguintes tópicos:  O básico das fontes  Configurando o Aplicativo Designer Independente  Configurando aplicativos baseados em ActiveReportsJS  Configurando o componente Report Designer  O básico das fontes  Todos os componentes ActiveReportsJS operam em um ambiente de navegador da web:  O   é construído com   , que usa Chromium para exibir a interface do usuário. Standalone Report Designer Electron  Os componentes   e   são partes de um aplicativo da web executado no navegador da máquina de um usuário. JavaScript Report Viewer Designer  Os filtros de exportação de PDF, dados tabulares e HTML usam um ambiente de navegador da web para medir o conteúdo do relatório.  Um relatório típico consiste em conteúdo textual que o navegador renderiza usando formas chamadas glifos. Os recursos de fontes contêm informações que mapeiam códigos de caracteres para glifos que representam esses caracteres. Portanto, os navegadores precisam de acesso aos recursos de fontes para exibir o texto conforme o esperado.  Todo o conteúdo textual em ActiveReportsJS possui várias propriedades de fonte, incluindo:    : O ID da fonte, ou seja, Arial, Calabri ou Times New Roman. Família de fontes    : Normal ou itálico. Estilo da fonte    : Fino, Extra Leve, Normal, Médio, SemiBold, Negrito, Extra Negrito, Pesado. Peso da fonte  Uma combinação única dessas três propriedades é chamada   . Uma família de fontes normalmente consiste em várias faces de fontes, que são (normalmente) representadas por vários arquivos. Font Face  Por exemplo, a família de fontes   tem seis fontes diferentes:  Calibri  Quando ActiveReportsJS renderiza um relatório, ele converte essas propriedades de fonte em propriedades de estilo CSS font-family, font-style e font-weight. Ele depende de um navegador para resolver recursos de fontes associados e extrair os glifos necessários. O navegador possui duas maneiras de acessar recursos de fontes; localmente, no sistema em que um navegador é executado ou por download.  Os recursos de fontes para download são fáceis de manter; todos os navegadores modernos os suportam e garantem a saída consistente de conteúdo textual em todos os ambientes. Além disso, o ActiveReportsJS PDF Export requer fontes para download porque incorpora seus subconjuntos em um documento PDF. Portanto, a melhor maneira de garantir uma saída de relatório consistente em todos os ambientes é configurar componentes ActiveReportsJS para acessar recursos de fontes para download.  Antes de começarmos, precisamos decidir quais famílias de fontes queremos usar em nossos relatórios. Podem ser fontes padrão como Arial, Times New Roman ou Helvetica. Ou pode ser qualquer número de fontes da web. Para nosso exemplo, usaremos a fonte Montserrat; esta é a mesma fonte que usamos em nossos relatórios de demonstração.  Em qualquer caso, certifique-se de ter todos os arquivos de fontes de todas as famílias de fontes que planeja usar. ActiveReportsJS oferece suporte aos seguintes formatos de fonte:   Configurando o Designer de Relatório Independente  Para adicionar uma família de fontes ao designer independente, primeiro você precisa navegar até a pasta que contém o arquivo de configuração da fonte ActiveReportsJS. Eles estão nos seguintes locais, com base no seu sistema operacional:    : %AppData%\ActiveReportsJS Designer\fontsConfig.json Windows    : ~/Library/Application Support/ActiveReportsJS Designer/fontsConfig.json macOS    : ~/.config/ActivereportsJS Designer/fontsConfig.json Linux  Neste local, crie uma pasta chamada   e copie todos os arquivos de todas as fontes que você planeja usar para esta pasta. Fontes  Em seguida, abra o arquivo   no editor de texto de sua preferência. Este arquivo contém descritores para raças de fontes que um autor de relatório usará para conteúdo textual. Na propriedade   , especifique o caminho absoluto para a pasta pai do diretório   . Substitua os itens padrão da matriz de descritores pelos descritores das fontes desejadas. fontsConfig.json path Fonts  Cada descritor inclui as seguintes propriedades:   Por exemplo, para permitir as faces Regular, Itálico e Negrito da fonte   , você usaria os seguintes descritores: 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" }  Execute o aplicativo de designer independente, adicione um TextBox no corpo de um relatório e certifique-se de poder definir sua propriedade   como uma das fontes enumeradas no arquivo   e de que todas as faces da fonte sejam exibidas corretamente. Font Family fontsConfig.json  Configurando aplicativos baseados em ActiveReportsJS  Um aplicativo que exibe relatórios no visualizador de relatórios JavaScript, exporta relatórios para um PDF ou hospeda o componente designer de relatórios deve usar a mesma configuração criada para o aplicativo designer independente. A maneira mais fácil de conseguir isso é copiar a pasta   e o arquivo   para a pasta de ativos estáticos do seu aplicativo. Fonts fontsConfig.json  Esta pasta varia para diferentes estruturas de front-end. Aqui estão alguns exemplos:    : usa configuração de ativos; se a pasta   e o arquivo   forem copiados para a pasta assets, modifique as propriedades de origem dos descritores de fonte no arquivo   para que eles comecem com assets. Por exemplo: Angular Fonts fontsConfig.json fontsConfig.json  { "nome": "Montserrat", "peso": "900", "estilo": "itálico", "fonte": "ativos/Fontes/Montserrat/Montserrat-BlackItalic.ttf" }    : usa a pasta pública para aplicativos criados com create-react-app. React    : usa manipulação de ativos estáticos. Vue  Por fim, a aplicação deve chamar o método   do objeto FontStore com a URL do arquivo   . Esse código deve ser executado antes que o aplicativo comece a exibir ou exportar relatórios. Observe que o método   é assíncrono e retorna um objeto   . registerFonts fontsConfig registerFonts Promise  O código que chama esse método também pode esperar até que a promessa retornada seja resolvida antes de carregar os relatórios no componente visualizador ou exportá-los.  Para aplicações JavaScript puras, o código ficará assim:   <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 aplicativos   ,   e Vue: Angular React   import { Core } from "@grapecity/activereports"; Core.FontStore.registerFonts("/assets/fontConfig.json") // replace the URL with the actual one  Você pode encontrar exemplos desse código em nossas   . demonstrações ao vivo  Configurando o componente Report Designer  Finalmente, para garantir que o componente do designer de relatório exiba apenas as fontes registradas, defina a propriedade   da instância do designer como registrada. fontSet  Além disso, se quiser garantir que os itens de relatório recém-adicionados tenham uma das fontes registradas por padrão, você pode usar o recurso   . Modelo de inicialização personalizado  Conclusão  E com isso chegamos ao final do artigo. Como já discutimos, as fontes são uma forma poderosa para os desenvolvedores melhorarem a estética e a legibilidade. Neste artigo, mostramos como é fácil incorporar fontes personalizadas em seus relatórios por meio do Designer e Visualizador de Relatórios ActiveReportsJS.  Boa codificação!  Também publicado   . aqui

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 áudio é produzido no idioma original da história!

Muito longo; Para ler

Make resilience your competitive advantage

Utilizando fontes personalizadas em relatórios JavaScript

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

O guia completo para uma migração bem-sucedida para a nuvem: estratégias e práticas recomendadas

Como melhorar seu fluxo de trabalho em 10 vezes: 17 aplicativos essenciais

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Valhalla de Floki se junta como patrocinador associado da viagem da Índia ao Sri Lanka

O guia completo para uma migração bem-sucedida para a nuvem: estratégias e práticas recomendadas

Como melhorar seu fluxo de trabalho em 10 vezes: 17 aplicativos essenciais

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Valhalla de Floki se junta como patrocinador associado da viagem da Índia ao Sri Lanka

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps