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

Darmowa biblioteka JavaScript do analizy i renderowania czcionek

Otwarto‑źródłowa biblioteka JavaScript do przetwarzania czcionek, obsługująca analizę i renderowanie czcionek TrueType oraz OpenType bezpośrednio w przeglądarce.

W dziedzinie tworzenia stron internetowych i oprogramowania typografia odgrywa kluczową rolę w kształtowaniu ogólnego doświadczenia użytkownika. Aby efektywnie manipulować i renderować czcionki, programiści korzystają z solidnych bibliotek upraszczających ten proces. Jedną z takich bibliotek jest Typr.js, potężna biblioteka JavaScript specjalnie zaprojektowana do parsowania i renderowania czcionek. Została zaprojektowana jako lekka, co umożliwia szybkie włączenie jej do projektów internetowych. Biblioteka obsługuje wszystkie główne przeglądarki internetowe, w tym Chrome, Firefox, Safari i Edge. Zapewnia to spójne renderowanie czcionek na różnych platformach i urządzeniach.

Typr.js to potężna otwarto‑źródłowa biblioteka JavaScript, która zapewnia programistom oprogramowania lekkie i wszechstronne rozwiązanie do pracy z różnymi typami plików czcionek. Umożliwia parsowanie i renderowanie czcionek TrueType i OpenType bezpośrednio w przeglądarce, eliminując potrzebę przetwarzania po stronie serwera. Dzięki temu Typr.js jest nieocenionym narzędziem dla projektantów i deweloperów stron internetowych, którzy chcą optymalizować typografię na swoich witrynach. Biblioteka w pełni wspiera implementację funkcji dostępności, takich jak skalowanie tekstu, regulacja odstępów między literami oraz ładowanie niestandardowych czcionek, dostosowując się do użytkowników o różnych potrzebach i wielu innych.

Typr.js jest bardzo łatwy w obsłudze i może być używany w różnych aplikacjach internetowych, od prostego renderowania tekstu po bardziej złożone projekty związane z typografią. Obsługuje ułatwiające funkcje, takie jak ładowanie i zarządzanie czcionkami na stronach internetowych, analizowanie i wyciąganie różnych metryk z czcionek, bezproblemowe manipulowanie i stylizowanie tekstu online, wsparcie dla internacjonalizacji i lokalizacji, zaawansowaną typografię i wiele innych. Jego bogaty zestaw funkcji, lekka natura i kompatybilność między przeglądarkami czynią go nieocenionym narzędziem do ulepszania typografii w sieci.

Previous Next

Rozpoczęcie pracy z Typr.js

Zalecanym sposobem instalacji Typr.js jest użycie npm. Proszę użyć poniższego polecenia, aby dodać zależność Maven w swoim projekcie.

Zainstaluj Typr.js za pomocą npm

 npm install @fredli74/typr --save-dev

Możesz również zainstalować go ręcznie; pobierz najnowsze pliki wydania bezpośrednio z repozytorium GitHub.

Ładowanie i zarządzanie czcionkami za pomocą interfejsu API JavaScript

Otwarty kod Typr.js zapewnia pełne wsparcie dla ładowania i zarządzania czcionkami w aplikacjach JavaScript. Uproszcza proces ładowania i zarządzania czcionkami na stronach internetowych. Obsługuje różne formaty czcionek, w tym TrueType (TTF), OpenType (OTF) oraz Web Open Font Format (WOFF), umożliwiając programistom płynne integrowanie własnych czcionek w ich projektach. Dzięki wygodnemu interfejsowi zarządzania czcionkami Typr.js pozwala programistom efektywnie kontrolować ładowanie czcionek i priorytetyzować podzbiory czcionek w celu optymalizacji wydajności.

Dodaj parser tabel SVG do parsowania czcionek SVG Color

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;

}

Zastosowanie formatowania tekstu i stylizacji za pomocą interfejsu API JavaScript

Otwarta biblioteka Typr.js ułatwia programistom stosowanie różnych rodzajów formatowania tekstu w aplikacjach JavaScript. Dzięki Typr.js programiści mogą bez wysiłku manipulować i stylizować tekst na stronach internetowych. Biblioteka oferuje szeroki zakres funkcji układu tekstu, takich jak łamanie linii, justowanie tekstu i dzielenie wyrazów, co pozwala na precyzyjną kontrolę nad prezentacją tekstu. Dodatkowo biblioteka obsługuje wiele opcji stylizacji tekstu, w tym odstępy między literami, odstępy między wyrazami oraz dekoracje tekstu, umożliwiając programistom tworzenie wizualnie atrakcyjnego i czytelnego tekstu.

Zastosowanie formatowania tekstu i stylizacji w aplikacjach 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 i ligatury za pomocą interfejsu API JavaScript

Typr.js pozwala programistom wykorzystać zaawansowane funkcje typograficzne, takie jak kerning i ligatury, aby zwiększyć atrakcyjność wizualną tekstu. Kerning dostosowuje odstępy między określonymi parami znaków, aby poprawić czytelność, natomiast ligatury zastępują sekwencje znaków wizualnie przyjemnymi alternatywami. Korzystając z tych funkcji, programiści mogą osiągnąć bardziej dopracowaną i harmonijną typografię w sieci.

 Polski