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

Libreria JavaScript gratuita per l'analisi e il rendering dei font

Libreria JavaScript open source per l'elaborazione dei font che supporta l'analisi e il rendering di font TrueType e OpenType direttamente nel browser.

Nell'ambito dello sviluppo web e software, la tipografia svolge un ruolo fondamentale nella definizione dell'esperienza utente complessiva. Per manipolare e renderizzare i font in modo efficiente, gli sviluppatori si affidano a librerie robuste che semplificano il processo. Una di queste è Typr.js, una potente libreria JavaScript progettata specificamente per l'analisi e il rendering dei font. È leggera, consentendo un'integrazione rapida nei progetti web. La libreria supporta tutti i principali browser web, tra cui Chrome, Firefox, Safari e Edge. Ciò garantisce una resa coerente dei font su diverse piattaforme e dispositivi.

Typr.js è una potente libreria JavaScript open source che fornisce agli sviluppatori software una soluzione leggera e versatile per lavorare con vari tipi di file di font. Consente l'analisi e il rendering dei font TrueType e OpenType direttamente nel browser, eliminando la necessità di elaborazione lato server. Questo rende Typr.js uno strumento inestimabile per i web designer e gli sviluppatori che desiderano ottimizzare la tipografia sui loro siti web. La libreria supporta pienamente l'implementazione di funzionalità di accessibilità, come la scalatura del testo, la regolazione della spaziatura delle lettere e il caricamento di font personalizzati, soddisfacendo utenti con esigenze diverse e molto altro.

Typr.js è molto facile da gestire e può essere utilizzato in una varietà di applicazioni web, che vanno dalla semplice resa del testo a progetti tipografici più complessi. Supporta funzionalità semplificate come il caricamento e la gestione dei font nelle pagine web, l'analisi e l'estrazione di varie metriche dai font, la manipolazione e lo styling del testo online senza sforzo, il supporto per l'internazionalizzazione e la localizzazione, la tipografia avanzata e molto altro. Il suo ricco set di funzionalità, la leggerezza e la compatibilità cross-browser lo rendono uno strumento indispensabile per migliorare la tipografia sul web.

Previous Next

Iniziare con Typr.js

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

Installa Typr.js tramite npm

 npm install @fredli74/typr --save-dev

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

Caricamento e gestione dei font tramite API JavaScript

L'open source Typr.js ha fornito un supporto completo per il caricamento e la gestione dei font all'interno delle applicazioni JavaScript. Semplifica il processo di caricamento e gestione dei font nelle pagine web. Supporta vari formati di font, tra cui TrueType (TTF), OpenType (OTF) e Web Open Font Format (WOFF), consentendo agli sviluppatori di integrare senza problemi font personalizzati nei loro progetti. Fornendo un'interfaccia di gestione dei font comoda, Typr.js permette agli sviluppatori di controllare in modo efficiente il caricamento dei font e di dare priorità ai sottoinsiemi di font per ottimizzare le prestazioni.

Aggiungi parser di tabelle SVG per l'analisi dei font colore SVG

Typr.SVG = {};
Typr.SVG.parse = function(data, offset, length)
{
  var bin = Typr._bin;
  var obj = { entries: []};

  var offset0 = offset;

  var tableVersion = bin.readUshort(data, offset);  offset += 2;
  var svgDocIndexOffset = bin.readUint(data, offset);  offset += 4;
  var reserved = bin.readUint(data, offset); offset += 4;

  offset = svgDocIndexOffset + offset0;

  var numEntries = bin.readUshort(data, offset);  offset += 2;

  for(var i=0; i < numEntries ; i++)
  {
    var startGlyphID = bin.readUshort(data, offset);  offset += 2;
    var endGlyphID = bin.readUshort(data, offset);  offset += 2;
    var svgDocOffset = bin.readUint(data, offset);  offset += 4;
    var svgDocLength = bin.readUint(data, offset); offset += 4;

    var svg = bin.readASCII(data, offset0 + svgDocOffset + svgDocIndexOffset, svgDocLength);

    for(var f=startGlyphID; f<=endGlyphID; f++){
      obj.entries[f] = svg;
    }
  }

  return obj;

}

Applicare formattazione e stile del testo tramite API JavaScript

La libreria open source Typr.js facilita gli sviluppatori software nell'applicare vari tipi di formattazione del testo all'interno delle applicazioni JavaScript. Con Typr.js, gli sviluppatori possono manipolare e stilizzare il testo sulle pagine web senza sforzo. Offre un'ampia gamma di funzioni di layout del testo, come interruzione di riga, giustificazione del testo e sillabazione, consentendo un controllo preciso su come il testo viene presentato. Inoltre, la libreria supporta una vasta gamma di opzioni di stile del testo, tra cui spaziatura delle lettere, spaziatura delle parole e decorazione del testo, permettendo agli sviluppatori di creare testi visivamente accattivanti e leggibili.

Applicare formattazione e stile del testo nelle app JavaScript

// Assume that Typr.js library is already loaded

// Define the target element where the text will be formatted and styled
const targetElement = document.getElementById('myTextElement');

// Load and parse the font file using Typr.js
Typr.loadFont('path/to/font.ttf', (font) => {
  // Font loading is complete
  
  // Apply the loaded font to the target element
  targetElement.style.fontFamily = font.name.fontFamily;

  // Set text content for the target element
  targetElement.textContent = 'Hello, Typr.js!';

  // Apply text styling
  targetElement.style.fontSize = '24px';
  targetElement.style.letterSpacing = '2px';
  targetElement.style.wordSpacing = '4px';
  targetElement.style.textDecoration = 'underline';

  // Additional text layout adjustments
  targetElement.style.textAlign = 'center';
  targetElement.style.lineHeight = '1.5';
  targetElement.style.textJustify = 'inter-word';
});

Kerning e legature tramite API JavaScript

Typr.js consente agli sviluppatori software di sfruttare le funzionalità tipografiche avanzate, come il kerning e le legature, per migliorare l'appeal visivo del testo. Il kerning regola la spaziatura tra coppie specifiche di caratteri per migliorare la leggibilità complessiva, mentre le legature sostituiscono sequenze di caratteri con alternative visivamente gradevoli. Sfruttando queste funzionalità, gli sviluppatori possono ottenere una tipografia più raffinata e armoniosa sul web.

 Italiano