1. Məhsullar
  2.   Font
  3.   JavaScript
  4.   OpenType.js
 
  

Şriftlərin Parsinqi və Yazılması üçün Pulsuz JavaScript Kitabxanası

TrueType və ya OpenType şriftlərini pars etmək, oxumaq və yazmaq imkanı verən Açıq Mənbəli JavaScript Kitabxanası. O, şrift idarəçiliyi, qlyf metrikləri və JS tətbiqlərində mətn düzülüşünü dəstəkləyir.

Veb dizayn və inkişafın geniş krallığında, tipografiya ümumi istifadəçi təcrübəsini formalaşdırmaqda əsas rol oynayır. Lakin, vebdə tipografiya ilə işləmək öz çətinliklərinə malikdir. Şükür ki, açıq mənbəli JavaScript kitabxanası olan opentype.js, veb tətbiqlərində tipografiyanın potensialını idarə etmək və istifadə etmək üçün proqramçılara güclü bir vasitə kimi ortaya çıxıb. Kitabxana sadə və intuitiv API təqdim edir, bu da bütün bacarıq səviyyələrindəki inkişafçılar üçün əlçatan edir. O, inkişafçılara tipografiyanı öz xüsusi dizayn tələblərinə uyğunlaşdırmaq və fərdiləşdirmək üçün çeviklik verir.

Opentype.js müasir veb brauzerlərin geniş çeşidində işləyir, bu da onu tipografik xüsusiyyətləri həyata keçirmək üçün etibarlı və ardıcıl həll edir. Kitabxananın bir neçə vacib xüsusiyyəti var, məsələn, güclü şriftin təhlil mexanizmi, şrift daxilində fərdi qlyflərlə işləmək, mürəkkəb mətn düzülüşü dəstəyi, müxtəlif şriftlərin renderlənməsi, brauzerlər arası uyğunluq, detallı şrift məlumatlarının çıxarılması, inkişaf etmiş mətn düzülüşü dəstəyi, fərdi qlyflərin animasiyası və daha çox. O, mövcud veb texnologiyaları ilə problemsiz inteqrasiya olunur və HTML5 canvas, SVG ilə və ya hətta CSS və JavaScript çərçivələri ilə birləşdirilə bilər.

Opentype.js açıq mənbəli JavaScript kitabxanasıdır və veb tərtibatçılara geniş istifadə olunan şrift formatı olan OpenType şriftləri ilə işləməyə imkan verir. OpenType şriftləri ligaturalar, kerning və qlyf əvəzləmələri kimi qabaqcıl tipografik xüsusiyyətlər təklif edir, bu da mətnin vizual cəlbediciliyini və oxunaqlılığını əhəmiyyətli dərəcədə artırır. Opentype.js-dən istifadə edərək, proqram tərtibatçıları bu xüsusiyyətləri açıb OpenType şriftlərinin əsas məlumatlarına daxil ola bilər, bu da onlara vebdə dinamik və interaktiv tipografik təcrübələr yaratmağa imkan verir. İstər tipografik detalların incə tənzimlənməsi, istərsə də mürəkkəb tipografik animasiyalar yaradılması, OpenType.js rəqəmsal aləmdə tipografiya sənətinə həvəsli olan hər kəs üçün qiymətsiz bir vasitədir.

Previous Next

Opentype.js ilə Başlanğıc

Opentype.js-i quraşdırmağın tövsiyə olunan yolu npm istifadə etməkdir. Layihənizə Maven asılılığını əlavə etmək üçün aşağıdakı əmri istifadə edin.

Opentype.js-i npm vasitəsilə quraşdırın

 npm install opentype.js

Siz həmçinin Opentype.js-in son buraxılış fayllarını birbaşa GitHub deposundan yükləyə bilərsiniz.

JavaScript API vasitəsilə Şrift Məlumatına Giriş

OpenType.js‑in əsas xüsusiyyətlərindən biri, yalnız bir neçə JavaScript sətiri ilə ətraflı şrift məlumatlarını çıxara bilməsidir. Açıq mənbəli Opentype.js kitabxanası, JavaScript tətbiqlərində şriftlərlə bağlı məlumatları yükləmək və onlara daxil olmaq üçün tam funksionallıq təmin edir. İnkişafçılar şrift adı, dizayner məlumatları, qlyf şəkilləri, kerning cütləri və daha çox kimi müxtəlif atributlara daxil ola bilərlər. Bu məlumatlar tipografiyanı dəqiq idarə etməyə və yaradıcı təcrübələri asanlaşdırmağa imkan verir. Aşağıdakı nümunə JavaScript əmrləri ilə şriftlərlə bağlı məlumatları necə yükləmək və göstərmək olduğunu göstərir.

JavaScript Tətbiqlərində Şriftlərlə Bağlı Məlumatları Necə Göstərmək Olar?

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 @@ 
Pulsuz Proqram təminatı

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 Tətbiqlərində Şriftləri Açmaq və Təhlil Etmək

Açıq mənbəli Opentype.js kitabxanası proqram təminatı inkişafçılarının öz JavaScript tətbiqlərində müxtəlif növ şriftləri yükləməsinə və çevirməsinə imkan verir. Kitabxana güclü şrift təhlili mexanizmi təqdim edir, bu da inkişafçılara OpenType (WOFF, OTF, TTF) şrift fayllarını veb tətbiqlərinə yükləməyə imkan verir. Şrift yükləndikdən sonra, inkişafçılar qlyf şəkilləri, ölçülər və meta‑məlumatlar kimi müxtəlif şrift xüsusiyyətlərinə daxil ola və onları dəyişdirə bilərlər. Aşağıdakı nümunə JavaScript tətbiqlərində WOFF, OTF, TTF kimi müxtəlif şrift növlərini necə yükləmək olduğunu göstərir.

JavaScript API vasitəsilə WOFF və ya TTF Şriftlərini Necə Yükləmək Olar?

// 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);
})
 Azəri