1. Produtos
  2.   Font
  3.   Node.js
  4.   OpenType.js
 
  

Biblioteca JavaScript Gratuita para Análise e Escrita de Fontes

Biblioteca JavaScript de Código Aberto que permite analisar, ler e escrever fontes TrueType ou OpenType. Ela suporta manipulação de fontes, métricas de glifos e layout de texto em aplicativos JS.

No campo de desenvolvimento web de software e tipografia digital, lidar com arquivos de fontes e criar experiências de renderização de texto perfeitas pode ser uma tarefa desafiadora. No entanto, trabalhar com fontes OpenType pode ser uma tarefa árdua, especialmente quando se trata de acessar seus recursos tipográficos avançados. É aqui que o OpenType.js entra – uma biblioteca revolucionária de código aberto que facilita o trabalho com fontes OpenType no navegador. Um dos principais benefícios do OpenType.js é sua capacidade de simplificar o processo de trabalho com fontes OpenType. Ao contrário de outras bibliotecas que exigem conhecimento extenso da tecnologia de fontes, o OpenType.js fornece uma API direta que facilita o início.

OpenType.js é uma biblioteca JavaScript que fornece uma API simples e intuitiva para acessar os recursos tipográficos avançados das fontes OpenType. Com o OpenType.js, desenvolvedores de software podem acessar facilmente recursos como ligaduras, glifos alternativos, fontes variáveis, entre outros, permitindo criar designs tipográficos complexos e sofisticados. Além de analisar e manipular fontes existentes, o opentype.js também suporta a criação de novos arquivos de fonte a partir do zero. Esse recurso é valioso para desenvolvedores que desejam gerar fontes personalizadas programaticamente. Sendo uma biblioteca JavaScript, o opentype.js pode ser usado tanto em ambientes client-side quanto server-side, tornando‑se uma escolha flexível para vários projetos. No geral, é uma biblioteca poderosa e versátil que oferece uma maneira simples e intuitiva de trabalhar com fontes OpenType no navegador.

Previous Next

Começando com Opentype.js

A forma recomendada de instalar o OpenType.js é usar o NPM. Por favor, use o comando a seguir para uma instalação tranquila.

Instale Opentype.js usando npm

 npm install opentype.js

Você também pode instalá-lo manualmente; baixe os arquivos da versão mais recente diretamente do repositório GitHub.

Análise de Fontes em Aplicações Node.js

Uma das principais funcionalidades do OpenType.js é sua capacidade de analisar arquivos de fontes OpenType e TrueType com apenas algumas linhas de código JavaScript. Isso permite que desenvolvedores de software leiam e compreendam a estrutura de uma fonte, incluindo seus glifos, informações de kerning e outros dados essenciais. No exemplo a seguir, a fonte Roboto Regular é carregada a partir de um arquivo TTF. A biblioteca analisa a fonte, tornando seus dados disponíveis para manipulação adicional.

Como Carregar e Analisar uma Fonte de um Arquivo TTF dentro do Node.js??

const opentype = require('opentype.js');

// Load a font from a file
opentype.load('fonts/Roboto-Regular.ttf', function(err, font) {
    if (err) {
        console.error('Font could not be loaded:', err);
    } else {
        console.log('Font loaded successfully:', font);
        console.log('Number of glyphs:', font.numGlyphs);
    }
});

Acessar e Manipular Glifos de Fonte no Node.js

A biblioteca de código aberto OpenType.js para Node.js permite que desenvolvedores de software acessem e manipulem glifos individuais dentro de uma fonte em aplicações Node.js. Glifos são as representações visuais dos caracteres em uma fonte. Com esse recurso, você pode extrair caminhos de glifos, modificá‑los ou até criar novos glifos. Aqui está um trecho de código que carrega uma fonte, recupera o glifo para o caractere "A" e, em seguida, escala o glifo em 1,5 vezes seu tamanho original. O método toPathData() converte o caminho do glifo em dados de caminho SVG, que podem ser usados para renderização ou manipulação adicional.

Como Carregar uma Fonte e Modificar Glifos em Aplicações Node.js?

const opentype = require('opentype.js');

// Load a font and modify a glyph
opentype.load('fonts/Roboto-Regular.ttf', function(err, font) {
    if (err) {
        console.error('Font could not be loaded:', err);
    } else {
        const glyph = font.charToGlyph('A');
        console.log('Original Glyph Path:', glyph.path.toPathData());

        // Modify the glyph path (e.g., scale it)
        glyph.path.scale(1.5);
        console.log('Scaled Glyph Path:', glyph.path.toPathData());
    }
});

Trabalhando com Tabelas de Fonte via Biblioteca Node.js

OpenType.js oferece aos desenvolvedores acesso às tabelas de fontes subjacentes, que armazenam informações detalhadas sobre o design e as métricas da fonte. Isso pode ser particularmente útil para manipulações ou análises avançadas de fontes. O trecho de código no exemplo a seguir demonstra como acessar tabelas de fontes específicas, como a tabela head (que contém as informações do cabeçalho da fonte) e a tabela hhea (que contém as métricas do cabeçalho horizontal). Essas tabelas fornecem detalhes essenciais que podem ser usados para controle preciso da renderização e do layout da fonte.

Como acessar tabelas de fontes específicas e a fonte dentro dela usando a biblioteca Node.js?

const opentype = require('opentype.js');

opentype.load('path/to/font.ttf', function(err, font) {
  if (err) {
    console.error('Font could not be loaded: ' + err);
  } else {
    // Access the 'head' table (font header)
    const headTable = font.tables.head;
    console.log('Units per Em: ' + headTable.unitsPerEm);

    // Access the 'hhea' table (horizontal header)
    const hheaTable = font.tables.hhea;
    console.log('Ascender: ' + hheaTable.ascender);
    console.log('Descender: ' + hheaTable.descender);
  }
});
 Português