1. Продукти
  2.   Font
  3.   JavaScript
  4.   OpenType.js
 
  

Безкоштовна JavaScript бібліотека для парсингу та запису шрифтів

Відкрита JavaScript бібліотека, яка дозволяє парсити, читати та записувати шрифти TrueType або OpenType. Вона підтримує обробку шрифтів, метрики гліфів та розмітку тексту в JavaScript-додатках.

У величезному королівстві веб‑дизайну та розробки типографіка відіграє вирішальну роль у формуванні загального користувацького досвіду. Однак робота з типографікою в інтернеті має свої виклики. На щастя, opentype.js, бібліотека JavaScript з відкритим кодом, стала потужним інструментом, який дає змогу розробникам програмного забезпечення маніпулювати та використовувати потенціал типографіки у веб‑застосунках. Бібліотека пропонує простий та інтуїтивний API, що робить її доступною для розробників будь‑якого рівня. Вона надає розробникам гнучкість налаштовувати та адаптувати типографіку під їхні конкретні вимоги дизайну.

Opentype.js працює у широкому діапазоні сучасних веб-браузерів, що робить його надійним і послідовним рішенням для впровадження типографічних функцій. У бібліотеці є кілька важливих можливостей, таких як надійний механізм парсингу шрифтів, взаємодія з окремими гліфами у шрифті, підтримка складного розташування тексту, рендеринг різних шрифтів, кросбраузерна сумісність, витяг детальних даних шрифту, розширена підтримка розташування тексту, анімація окремих гліфів та багато іншого. Вона безшовно інтегрується з існуючими веб-технологіями і може використовуватися з HTML5 canvas, SVG або навіть у поєднанні з CSS та JavaScript фреймворками.

Opentype.js — це бібліотека JavaScript з відкритим кодом, яка дозволяє веб‑розробникам працювати з шрифтами OpenType, широко використовуваним форматом шрифтів. Шрифти OpenType пропонують розширені типографічні можливості, такі як лігатури, кернінг та заміна гліфів, що значно підвищують візуальну привабливість і читабельність тексту. Використовуючи opentype.js, розробники програмного забезпечення можуть розблокувати ці функції та отримати доступ до базових даних шрифтів OpenType, що дозволяє створювати динамічні та інтерактивні типографічні досвіди в інтернеті. Будь то тонке налаштування типографічних деталей або створення складних типографічних анімацій, OpenType.js є незамінним інструментом для всіх, хто захоплюється мистецтвом типографіки в цифровому середовищі.

Previous Next

Початок роботи з Opentype.js

Рекомендований спосіб встановлення Opentype.js — використання npm. Будь ласка, скористайтеся наступною командою, щоб додати залежність Maven у ваш проект.

Встановіть Opentype.js через npm

 npm install opentype.js

Ви також можете встановити його вручну; завантажте останні файли релізу безпосередньо з репозиторію GitHub.

Доступ до даних шрифтів через JavaScript API

Однією з ключових особливостей OpenType.js є її здатність витягувати детальні дані шрифту всього за кілька рядків коду JavaScript. Відкрита бібліотека Opentype.js забезпечує повну функціональність для завантаження та доступу до даних, пов’язаних зі шрифтами, у їхніх JavaScript‑додатках. Розробники можуть отримувати різні атрибути, такі як назва шрифту, інформація про дизайнера, форми гліфів, пари кернінгу та багато іншого. Ця інформація дозволяє точно контролювати типографіку та сприяє творчим експериментам. Наведений нижче приклад показує, як завантажити та відобразити дані, пов’язані зі шрифтами, за допомогою команд JavaScript.

Як відображати дані, пов’язані зі шрифтами, у 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 @@ 
Вільне програмне забезпечення

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

Відкриття та аналіз шрифтів у JavaScript-додатках

Відкрита бібліотека Opentype.js дозволяє розробникам програмного забезпечення завантажувати та конвертувати різні типи шрифтів у власних JavaScript‑додатках. Бібліотека забезпечує надійний механізм розбору шрифтів, що дозволяє розробникам завантажувати файли шрифтів OpenType (WOFF, OTF, TTF) у свої веб‑додатки. Після завантаження шрифту розробники можуть отримувати та маніпулювати різними властивостями шрифту, такими як форми гліфів, метрики та метадані. Наведений нижче приклад показує, як завантажити різні типи шрифтів, такі як WOFF, OTF, TTF, у JavaScript‑додатки.

Як завантажити шрифти WOFF або TTF за допомогою JavaScript API?

// 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);
})
 Українська