1. Товары
  2.   Font
  3.   JavaScript
  4.   OpenType.js
 
  

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

Открытая JavaScript‑библиотека, позволяющая разбирать, читать и записывать шрифты TrueType или OpenType. Она поддерживает работу со шрифтами, метрики глифов и верстку текста в JS‑приложениях.

В огромном королевстве веб‑дизайна и разработки типография играет ключевую роль в формировании общего пользовательского опыта. Однако работа с типографикой в вебе сопряжена со своими проблемами. К счастью, 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);
})
 Русский