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

Darmowa biblioteka JavaScript do parsowania i zapisu czcionek

Biblioteka JavaScript Open Source, która umożliwia parsowanie, odczyt i zapis czcionek TrueType lub OpenType. Wspiera obsługę czcionek, metryki glifów i układ tekstu w aplikacjach JS.

W rozległym królestwie projektowania i tworzenia stron internetowych typografia odgrywa kluczową rolę w kształtowaniu ogólnego doświadczenia użytkownika. Jednak praca z typografią w sieci niesie ze sobą własne wyzwania. Na szczęście opentype.js, otwarto‑źródłowa biblioteka JavaScript, stała się potężnym narzędziem, które umożliwia programistom manipulowanie i wykorzystywanie potencjału typografii w aplikacjach internetowych. Biblioteka oferuje prosty i intuicyjny interfejs API, co czyni go dostępnym dla programistów o różnym poziomie zaawansowania. Daje deweloperom elastyczność w dostosowywaniu i adaptacji typografii do ich konkretnych wymagań projektowych.

Opentype.js działa w szerokim zakresie nowoczesnych przeglądarek internetowych, co czyni go niezawodnym i spójnym rozwiązaniem do wdrażania funkcji typograficznych. Biblioteka zawiera kilka ważnych funkcji, takich jak solidny mechanizm parsowania czcionek, interakcja z pojedynczymi glifami w czcionce, obsługa złożonego układu tekstu, renderowanie różnych czcionek, kompatybilność między przeglądarkami, wyodrębnianie szczegółowych danych czcionki, zaawansowana obsługa układu tekstu, animowanie pojedynczych glifów i wiele innych. Bezproblemowo integruje się z istniejącymi technologiami webowymi i może być używany z HTML5 canvas, SVG, a nawet w połączeniu z CSS i frameworkami JavaScript.

Opentype.js jest otwartoźródłową biblioteką JavaScript, która umożliwia programistom internetowym pracę z czcionkami OpenType, powszechnie używanym formatem czcionek. Czcionki OpenType oferują zaawansowane funkcje typograficzne, takie jak ligatury, kerning i zamiany glifów, które znacznie zwiększają atrakcyjność wizualną i czytelność tekstu. Korzystając z opentype.js, programiści mogą odblokować te funkcje i uzyskać dostęp do danych podstawowych czcionek OpenType, co pozwala tworzyć dynamiczne i interaktywne doświadczenia typograficzne w sieci. Niezależnie od tego, czy chodzi o dopracowanie szczegółów typograficznych, czy tworzenie skomplikowanych animacji typograficznych, Opentype.js jest nieocenionym narzędziem dla każdego pasjonata sztuki typografii w cyfrowym świecie.

Previous Next

Rozpoczęcie pracy z Opentype.js

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

Zainstaluj Opentype.js za pomocą npm

 npm install opentype.js

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

Uzyskiwanie danych czcionki za pomocą interfejsu API JavaScript

Jedną z kluczowych funkcji OpenType.js jest możliwość wyodrębniania szczegółowych danych czcionki przy użyciu zaledwie kilku linii kodu JavaScript. Biblioteka open source Opentype.js zapewnia pełną funkcjonalność ładowania i dostępu do danych związanych z czcionkami w aplikacjach JavaScript. Programiści mogą uzyskać dostęp do różnych atrybutów, takich jak nazwa czcionki, informacje o projektancie, kształty glifów, pary kerningowe i wiele innych. Informacje te umożliwiają precyzyjną kontrolę typografii i ułatwiają kreatywne eksperymenty. Poniższy przykład pokazuje, jak załadować i wyświetlić dane związane z czcionkami przy użyciu poleceń JavaScript.

Jak wyświetlić dane związane z czcionkami w aplikacjach 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 @@ 
Darmowe oprogramowanie

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

Otwieranie i parsowanie czcionek w aplikacjach JavaScript

Biblioteka open source Opentype.js umożliwia programistom ładowanie i konwertowanie różnych typów czcionek w własnych aplikacjach JavaScript. Biblioteka zapewnia solidny mechanizm parsowania czcionek, pozwalając programistom ładować pliki czcionek OpenType (WOFF, OTF, TTF) do ich aplikacji internetowych. Po załadowaniu czcionki programiści mogą uzyskać dostęp i manipulować różnymi właściwościami czcionki, takimi jak kształty glifów, metryki i metadane. Poniższy przykład pokazuje, jak ładować różne typy czcionek, takie jak czcionki WOFF, OTF, TTF, w aplikacjach JavaScript.

Jak załadować czcionki WOFF lub TTF za pomocą interfejsu 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);
})
 Polski