1. Produtos
  2.   Font
  3.   JavaScript
  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 vasto reino do design e desenvolvimento web, a tipografia desempenha um papel fundamental na formação da experiência geral do usuário. No entanto, trabalhar com tipografia na web tem seus próprios desafios. Felizmente, o opentype.js, uma biblioteca JavaScript de código aberto, surgiu como uma ferramenta poderosa que capacita os desenvolvedores de software a manipular e aproveitar o potencial da tipografia em aplicações web. A biblioteca fornece uma API simples e intuitiva, tornando-a acessível a desenvolvedores de todos os níveis de habilidade. Ela oferece aos desenvolvedores a flexibilidade de personalizar e adaptar a tipografia para atender aos requisitos específicos de design.

Opentype.js funciona em uma ampla variedade de navegadores web modernos, tornando‑se uma solução confiável e consistente para a implementação de recursos tipográficos. Existem várias funcionalidades importantes na biblioteca, como mecanismo robusto de análise de fontes, interação com glifos individuais dentro de uma fonte, suporte a layout de texto complexo, renderização de diversas fontes, compatibilidade entre navegadores, extração de dados detalhados da fonte, suporte avançado a layout de texto, animação de glifos individuais e muito mais. Ele integra‑se perfeitamente com as tecnologias web existentes e pode ser usado com canvas HTML5, SVG ou até mesmo combinado com frameworks CSS e JavaScript.

Opentype.js é uma biblioteca JavaScript de código aberto que permite que desenvolvedores web trabalhem com fontes OpenType, um formato de fonte amplamente usado. As fontes OpenType oferecem recursos tipográficos avançados, como ligaduras, kerning e substituições de glifos, que melhoram muito o apelo visual e a legibilidade do texto. Ao aproveitar o opentype.js, desenvolvedores de software podem desbloquear esses recursos e acessar os dados subjacentes das fontes OpenType, permitindo criar experiências tipográficas dinâmicas e interativas na web. Seja ajustando detalhes tipográficos ou criando animações tipográficas intrincadas, o OpenType.js é uma ferramenta indispensável para quem é apaixonado pela arte da tipografia no ambiente digital.

Previous Next

Começando com Opentype.js

A forma recomendada de instalar o Opentype.js é usando npm. Por favor, use o comando a seguir para adicionar a dependência Maven ao seu projeto.

Instale Opentype.js via 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.

Acessando Dados de Fontes via API JavaScript

Uma das principais características do OpenType.js é sua capacidade de extrair dados detalhados de fontes com apenas algumas linhas de código JavaScript. A biblioteca de código aberto Opentype.js oferece funcionalidade completa para carregar e acessar dados relacionados a fontes dentro de suas aplicações JavaScript. Os desenvolvedores podem acessar vários atributos, como nome da fonte, informações do designer, formas de glifos, pares de kerning e muito mais. Essas informações permitem controle preciso sobre tipografia e facilitam a experimentação criativa. O exemplo a seguir mostra como carregar e exibir dados relacionados a fontes usando comandos JavaScript.

Como Exibir Dados Relacionados a Fontes dentro de Aplicativos JavaScript?

function displayFontData() {
    document.getElementById("font-data").innerHTML = JSON.stringify(font.tables, null, 4);
	var html, tablename, table, property, value;
	for(tablename in font.tables) {
		table = font.tables[tablename];
		html = '';
		for(property in table) {
			value = table[property];
			html += '
'+property+'
';
			html += value;
			html += '
';
		}
		document.getElementById(tablename+"-table").innerHTML = html;
	}
}

function onFontLoaded(font) {
@@ -331,6 +384,13 @@ 
Software Gratuito

fontSizeSlider.addEventListener('input', fontSizeChanged, false);
fontSizeSlider.addEventListener('change', fontSizeChanged, false);

var tableHeaders = document.getElementById('font-data').getElementsByTagName('h3');
for(var i = tableHeaders.length; i--; ) {
	tableHeaders[i].addEventListener('click', function(e) {
		e.target.className = (e.target.className === 'collapsed') ? 'expanded' : 'collapsed';
	}, false);
}

opentype.load(fontFileName, function (err, font) {
    var amount, glyph, ctx, x, y, fontSize;
    if (err) {
        showErrorMessage(err.toString());
        return;
    }
    onFontLoaded(font);
});

Abrir e Analisar Fontes dentro de Aplicativos JavaScript

A biblioteca de código aberto Opentype.js permite que desenvolvedores de software carreguem e convertam vários tipos de fontes em suas próprias aplicações JavaScript. A biblioteca fornece um mecanismo robusto de análise de fontes, permitindo que os desenvolvedores carreguem arquivos de fonte OpenType (WOFF, OTF, TTF) em suas aplicações web. Uma vez que a fonte está carregada, os desenvolvedores podem acessar e manipular várias propriedades da fonte, como formas de glifos, métricas e metadados. O exemplo a seguir mostra como carregar vários tipos de fontes, como fontes WOFF, OTF e TTF, em aplicativos JavaScript.

Como Carregar Fontes WOFF ou TTF via API JavaScript?

// case 1: from an URL
const buffer = fetch('/fonts/my.woff').then(res => res.arrayBuffer());
// case 2: from filesystem (node)
const buffer = require('fs').promises.readFile('./my.woff');
// case 3: from an 
const buffer = document.getElementById('myfile').files[0].arrayBuffer();

// if running in async context:
const font = opentype.parse(await buffer);
console.log(font);

// if not running in async context:
buffer.then(data => {
    const font = opentype.parse(data);
    console.log(font);
})
 Português