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);
})
 Български