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

Kostenlose JavaScript-Bibliothek zum Parsen & Rendern von Schriften

Open-Source-JavaScript-Bibliothek zur Schriftverarbeitung, die das Parsen und Rendern von TrueType- sowie OpenType-Schriften direkt im Browser unterstützt.

Im Bereich der Web- und Softwareentwicklung spielt Typografie eine entscheidende Rolle bei der Gestaltung des gesamten Benutzererlebnisses. Um Schriften effizient zu manipulieren und zu rendern, greifen Entwickler auf robuste Bibliotheken zurück, die den Prozess vereinfachen. Eine solche Bibliothek ist Typr.js, eine leistungsstarke JavaScript-Bibliothek, die speziell für das Parsen und Rendern von Schriften entwickelt wurde. Sie ist leichtgewichtig konzipiert, was eine schnelle Integration in Webprojekte ermöglicht. Die Bibliothek unterstützt alle gängigen Webbrowser, einschließlich Chrome, Firefox, Safari und Edge. Dies gewährleistet ein konsistentes Schrift-Rendering auf verschiedenen Plattformen und Geräten.

Typr.js ist eine leistungsstarke Open-Source-JavaScript-Bibliothek, die Softwareentwicklern eine leichte und vielseitige Lösung für die Arbeit mit verschiedenen Schriftdateitypen bietet. Sie ermöglicht das Parsen und Rendern von TrueType- und OpenType-Schriften direkt im Browser und eliminiert damit die Notwendigkeit einer serverseitigen Verarbeitung. Das macht Typr.js zu einem unverzichtbaren Werkzeug für Webdesigner und Entwickler, die die Typografie auf ihren Websites optimieren möchten. Die Bibliothek unterstützt vollständig die Implementierung von Barrierefreiheitsfunktionen, wie Textskalierung, Anpassungen des Buchstabenabstands und benutzerdefiniertes Laden von Schriften, um den Bedürfnissen verschiedener Nutzer gerecht zu werden und vieles mehr.

Typr.js ist sehr einfach zu handhaben und kann in einer Vielzahl von Webanwendungen eingesetzt werden, von einfacher Textdarstellung bis hin zu komplexeren typografiebezogenen Projekten. Es unterstützt vereinfachende Funktionen wie das Laden und Verwalten von Schriftarten auf Webseiten, das Analysieren und Extrahieren verschiedener Metriken aus Schriftarten, das mühelose Manipulieren und Stylen von Text online, Unterstützung für Internationalisierung und Lokalisierung, erweiterte Typografie und vieles mehr. Sein umfangreicher Funktionsumfang, seine leichte Bauweise und die plattformübergreifende Kompatibilität machen es zu einem unverzichtbaren Werkzeug zur Verbesserung der Typografie im Web.

Previous Next

Erste Schritte mit Typr.js

Die empfohlene Methode, Typr.js zu installieren, ist die Verwendung von npm. Bitte verwenden Sie den folgenden Befehl, um die Maven-Abhängigkeit in Ihrem Projekt hinzuzufügen.

Typr.js über npm installieren

 npm install @fredli74/typr --save-dev

Sie können es auch manuell installieren; laden Sie die neuesten Release-Dateien direkt vom GitHub-Repository herunter.

Schriftladen und -verwaltung über die JavaScript-API

Das Open-Source-Projekt Typr.js bietet vollständige Unterstützung für das Laden und Verwalten von Schriftarten in JavaScript-Anwendungen. Es vereinfacht den Prozess des Ladens und Verwalten von Schriftarten auf Webseiten. Es unterstützt verschiedene Schriftformate, einschließlich TrueType (TTF), OpenType (OTF) und Web Open Font Format (WOFF), sodass Entwickler benutzerdefinierte Schriftarten nahtlos in ihre Projekte integrieren können. Durch die Bereitstellung einer praktischen Schnittstelle zur Schriftverwaltung ermöglicht Typr.js Entwicklern, das Laden von Schriftarten effizient zu steuern und Schriftuntergruppen zu priorisieren, um die Leistung zu optimieren.

SVG-Tabellenparser für das Parsen von SVG-Farb-Schriften hinzufügen

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;

}

Textformatierung & -stil über die JavaScript-API anwenden

Die Open-Source-Bibliothek Typr.js erleichtert Softwareentwicklern das Anwenden verschiedener Textformatierungen in JavaScript-Anwendungen. Mit Typr.js können Entwickler Text auf Webseiten mühelos manipulieren und gestalten. Sie bietet ein umfangreiches Spektrum an Textlayout‑Funktionen, wie Zeilenumbruch, Textausrichtung und Silbentrennung, wodurch eine präzise Kontrolle über die Darstellung des Textes ermöglicht wird. Darüber hinaus unterstützt die Bibliothek eine Vielzahl von Textstil‑Optionen, einschließlich Buchstabenabstand, Wortabstand und Textdekoration, sodass Entwickler ansprechende und gut lesbare Texte erstellen können.

Textformatierung und -stil in JavaScript-Anwendungen anwenden

// 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 und Ligaturen über die JavaScript-API

Typr.js ermöglicht es Softwareentwicklern, fortgeschrittene typografische Funktionen wie Kerning und Ligaturen zu nutzen, um die visuelle Attraktivität von Text zu verbessern. Kerning passt den Abstand zwischen bestimmten Zeichenpaaren an, um die Lesbarkeit insgesamt zu erhöhen, während Ligaturen Zeichenfolgen durch optisch ansprechende Alternativen ersetzen. Durch die Nutzung dieser Funktionen können Entwickler eine feinere und harmonischere Typografie im Web erzielen.

 Deutsch