1. Prodotti
  2.   Font
  3.   JavaScript
  4.   OpenType.js
 
  

Libreria JavaScript gratuita per l'analisi e la scrittura di font

Libreria JavaScript Open Source che consente di analizzare, leggere e scrivere font TrueType o OpenType. Supporta la gestione dei font, le metriche dei glifi e il layout del testo nelle app JS.

Nell'immenso regno del design e dello sviluppo web, la tipografia svolge un ruolo fondamentale nel plasmare l'esperienza complessiva dell'utente. Tuttavia, lavorare con la tipografia sul web presenta una serie di sfide. Fortunatamente, opentype.js, una libreria JavaScript open-source, è emersa come uno strumento potente che consente agli sviluppatori di manipolare e sfruttare il potenziale della tipografia nelle applicazioni web. La libreria offre un'API semplice e intuitiva, rendendola accessibile a sviluppatori di tutti i livelli di competenza. Consente agli sviluppatori di personalizzare e adattare la tipografia per soddisfare i requisiti di design specifici.

Opentype.js funziona su un'ampia gamma di browser web moderni, rendendolo una soluzione affidabile e coerente per l'implementazione di funzionalità tipografiche. Ci sono diverse funzionalità importanti nella libreria, come un robusto meccanismo di parsing dei font, l'interazione con singoli glifi all'interno di un font, il supporto a layout di testo complessi, il rendering di vari font, la compatibilità cross-browser, l'estrazione di dati dettagliati del font, il supporto avanzato al layout del testo, l'animazione di singoli glifi e molto altro. Si integra perfettamente con le tecnologie web esistenti e può essere utilizzato con canvas HTML5, SVG, o anche combinato con framework CSS e JavaScript.

Opentype.js è una libreria JavaScript open source che consente agli sviluppatori web di lavorare con i font OpenType, un formato di font ampiamente utilizzato. I font OpenType offrono funzionalità tipografiche avanzate, come legature, kerning e sostituzioni di glifi, che migliorano notevolmente l'appeal visivo e la leggibilità del testo. Sfruttando opentype.js, gli sviluppatori software possono sbloccare queste funzionalità e accedere ai dati sottostanti dei font OpenType, consentendo loro di creare esperienze tipografiche dinamiche e interattive sul web. Che si tratti di perfezionare i dettagli tipografici o di creare complesse animazioni tipografiche, OpenType.js è uno strumento indispensabile per chiunque sia appassionato dell'arte della tipografia nel mondo digitale.

Previous Next

Iniziare con Opentype.js

Il modo consigliato per installare Opentype.js è utilizzare npm. Si prega di usare il comando seguente per aggiungere la dipendenza Maven nel proprio progetto.

Installa Opentype.js tramite npm

 npm install opentype.js

È possibile installarlo anche manualmente; scarica i file dell'ultima release direttamente dal repository GitHub.

Accesso ai dati dei font tramite API JavaScript

Una delle caratteristiche principali di OpenType.js è la sua capacità di estrarre dati dettagliati sui font con sole poche righe di codice JavaScript. La libreria open source Opentype.js ha fornito funzionalità complete per caricare e accedere ai dati relativi ai font all'interno delle loro applicazioni JavaScript. Gli sviluppatori possono accedere a vari attributi come il nome del font, le informazioni sul designer, le forme dei glifi, le coppie di kerning e molto altro. Queste informazioni consentono un controllo preciso della tipografia e facilitano la sperimentazione creativa. L'esempio seguente mostra come caricare e visualizzare i dati relativi ai font utilizzando comandi JavaScript.

Come visualizzare i dati relativi ai font nelle app 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 Libero

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);
});

Aprire e analizzare i font all'interno delle app JavaScript

La libreria open source Opentype.js consente agli sviluppatori di software di caricare e convertire vari tipi di font all'interno delle proprie applicazioni JavaScript. La libreria offre un meccanismo robusto di parsing dei font, permettendo agli sviluppatori di caricare file di font OpenType (WOFF, OTF, TTF) nelle loro applicazioni web. Una volta caricato il font, gli sviluppatori possono accedere e manipolare varie proprietà del font, come le forme dei glifi, le metriche e i metadati. L'esempio seguente mostra come caricare vari tipi di font come WOFF, OTF, TTF all'interno di app JavaScript.

Come caricare font WOFF o TTF tramite 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);
})
 Italiano