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

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

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

У сфері веб- та розробки програмного забезпечення типографіка відіграє вирішальну роль у формуванні загального користувацького досвіду. Щоб ефективно маніпулювати та відображати шрифти, розробники покладаються на потужні бібліотеки, які спрощують процес. Однією з таких бібліотек є Typr.js — потужна JavaScript‑бібліотека, спеціально створена для розбору та рендерингу шрифтів. Вона розроблена як легка, що дозволяє швидко інтегрувати її у веб‑проекти. Бібліотека підтримує всі основні веб‑браузери, включаючи Chrome, Firefox, Safari та Edge. Це забезпечує послідовне відображення шрифтів на різних платформах та пристроях.

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

Typr.js дуже легко використовувати і його можна застосовувати в різноманітних веб-додатках, від простого відображення тексту до більш складних проєктів, пов’язаних з типографією. Він підтримує спрощені функції, такі як завантаження та керування шрифтами на веб-сторінках, аналіз і витяг різних метрик зі шрифтів, легке маніпулювання та стилізацію тексту онлайн, підтримка інтернаціоналізації та локалізації, розширена типографія та багато іншого. Його багатий набір функцій, легка вага та кросбраузерна сумісність роблять його незамінним інструментом для покращення типографії в інтернеті.

Previous Next

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

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

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

 npm install @fredli74/typr --save-dev

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

Завантаження шрифтів та керування ними за допомогою JavaScript API

Відкритий проект Typr.js забезпечив повну підтримку завантаження та керування шрифтами в JavaScript-додатках. Він спрощує процес завантаження та керування шрифтами на веб-сторінках. Підтримуються різні формати шрифтів, включаючи TrueType (TTF), OpenType (OTF) та Web Open Font Format (WOFF), що дозволяє розробникам безшовно інтегрувати власні шрифти у свої проєкти. Завдяки зручному інтерфейсу керування шрифтами Typr.js дозволяє розробникам ефективно контролювати завантаження шрифтів і пріоритезувати підмножини шрифтів для оптимізації продуктивності.

Додайте SVG Table Parser для розбору кольорових шрифтів SVG

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;

}

Застосування форматування тексту та стилізації за допомогою JavaScript API

Відкритий бібліотека Typr.js спрощує розробникам програмного забезпечення застосування різних типів форматування тексту в JavaScript-додатках. За допомогою Typr.js розробники можуть без зусиль маніпулювати та стилізувати текст на веб-сторінках. Вона надає широкий спектр функцій розташування тексту, таких як розрив рядків, вирівнювання тексту та перенесення слів, що дозволяє точно контролювати спосіб представлення тексту. Крім того, бібліотека підтримує великий набір параметрів стилізації тексту, включаючи інтервали між літерами, інтервали між словами та декорації тексту, що дозволяє розробникам створювати візуально привабливий та читабельний текст.

Застосуйте форматування тексту та стилізацію у 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';
});

Кернінг та лігатури за допомогою JavaScript API

Typr.js дозволяє розробникам програмного забезпечення скористатися передовими типографічними функціями, такими як кернінг і лігатури, щоб підвищити візуальну привабливість тексту. Кернінг регулює відстань між певними парами символів для покращення загальної читабельності, тоді як лігатури замінюють послідовності символів на візуально приємні альтернативи. Використовуючи ці функції, розробники можуть досягти більш витонченої та гармонійної типографіки в інтернеті.

 Українська