1. Ürün:% s
  2.   Font
  3.   JavaScript
  4.   OpenType.js
 
  

Yazı Tipi Ayrıştırma ve Yazma için Ücretsiz JavaScript Kütüphanesi

TrueType veya OpenType yazı tiplerini ayrıştırma, okuma ve yazma imkanı sağlayan Açık Kaynaklı JavaScript Kütüphanesi. JS uygulamaları içinde Yazı Tipi İşleme, Glif Ölçümleri ve Metin Düzeni desteği sunar.

Geniş web tasarımı ve geliştirme diyarında, tipografi genel kullanıcı deneyimini şekillendirmede hayati bir rol oynar. Ancak, web üzerinde tipografiyle çalışmak kendi zorluklarını beraberinde getirir. Neyse ki, açık kaynaklı bir JavaScript kütüphanesi olan opentype.js, yazılım geliştiricilerine web uygulamalarında tipografiyi manipüle etme ve potansiyelini kullanma gücü veren güçlü bir araç olarak ortaya çıktı. Kütüphane basit ve sezgisel bir API sunar, bu da tüm beceri seviyelerindeki geliştiriciler için erişilebilir olmasını sağlar. Geliştiricilere, tipografiyi belirli tasarım gereksinimlerine uyacak şekilde özelleştirme ve uyarlama esnekliği verir.

Opentype.js, modern web tarayıcılarının geniş bir yelpazesinde çalışır ve tipografik özellikleri uygulamak için güvenilir ve tutarlı bir çözüm sunar. Kütüphanenin bir parçası olan birkaç önemli özellik vardır; sağlam bir yazı tipi ayrıştırma mekanizması, bir yazı tipindeki bireysel gliflerle etkileşim, karmaşık metin yerleşimi desteği, çeşitli yazı tiplerinin render edilmesi, tarayıcılar arası uyumluluk, ayrıntılı yazı tipi verilerinin çıkarılması, gelişmiş metin yerleşimi desteği, bireysel gliflerin animasyonu ve daha fazlası. Mevcut web teknolojileriyle sorunsuz bir şekilde bütünleşir ve HTML5 canvas, SVG ile kullanılabilir ya da CSS ve JavaScript çerçeveleriyle bile birleştirilebilir.

Opentype.js, web geliştiricilerin yaygın olarak kullanılan bir font formatı olan OpenType fontlarıyla çalışmasını sağlayan açık kaynaklı bir JavaScript kütüphanesidir. OpenType fontları, ligatürler, kerning ve glif ikameleri gibi gelişmiş tipografik özellikler sunar; bu da metnin görsel çekiciliğini ve okunabilirliğini büyük ölçüde artırır. Opentype.js'i kullanarak, yazılım geliştiricileri bu özellikleri ortaya çıkarabilir ve OpenType fontlarının temel verilerine erişebilir, böylece web üzerinde dinamik ve etkileşimli tipografik deneyimler oluşturabilirler. İster tipografik detayları ince ayar yapın, ister karmaşık tipografik animasyonlar yaratın, Opentype.js dijital alanda tipografi sanatına tutkulu olan herkes için vazgeçilmez bir araçtır.

Previous Next

Opentype.js ile Başlarken

Opentype.js'i kurmanın önerilen yolu npm kullanmaktır. Lütfen projenize Maven bağımlılığını eklemek için aşağıdaki komutu kullanın.

Opentype.js'i npm aracılığıyla kurun

 npm install opentype.js

Ayrıca manuel olarak da kurabilirsiniz; en son sürüm dosyalarını doğrudan GitHub deposundan indirebilirsiniz.

JavaScript API'si ile Yazı Tipi Verilerine Erişme

OpenType.js'in temel özelliklerinden biri, sadece birkaç JavaScript satırıyla ayrıntılı yazı tipi verilerini çıkarabilmesidir. Açık kaynaklı Opentype.js kütüphanesi, JavaScript uygulamaları içinde Yazı Tipiyle ilgili verileri yükleme ve erişme konusunda tam işlevsellik sağlamıştır. Geliştiriciler, yazı tipi adı, tasarımcı bilgileri, glif şekilleri, kerning çiftleri ve daha fazlası gibi çeşitli özelliklere erişebilir. Bu bilgiler, tipografi üzerinde hassas kontrol sağlar ve yaratıcı denemeleri kolaylaştırır. Aşağıdaki örnek, JavaScript komutlarıyla yazı tipiyle ilgili verileri nasıl yükleyip görüntüleyeceğinizi gösterir.

JavaScript Uygulamalarında Yazı Tipi İlgili Verileri Nasıl Görüntülersiniz?

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 @@ 
Ücretsiz Yazılım

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 Uygulamalarında Yazı Tiplerini Açma ve Ayrıştırma

Açık kaynaklı Opentype.js kütüphanesi, yazılım geliştiricilerin kendi JavaScript uygulamaları içinde çeşitli yazı tipi türlerini yüklemelerini ve dönüştürmelerini sağlar. Kütüphane, geliştiricilerin OpenType (WOFF, OTF, TTF) yazı tipi dosyalarını web uygulamalarına yüklemelerine olanak tanıyan sağlam bir yazı tipi ayrıştırma mekanizması sunar. Yazı tipi yüklendikten sonra, geliştiriciler glif şekilleri, ölçümler ve meta veriler gibi çeşitli yazı tipi özelliklerine erişebilir ve bunları manipüle edebilir. Aşağıdaki örnek, JavaScript uygulamaları içinde WOFF, OTF, TTF gibi çeşitli yazı tipi türlerini nasıl yükleyeceğinizi gösterir.

JavaScript API'si ile WOFF veya TTF Yazı Tipi Nasıl Yüklenir?

// 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);
})
 Türkçe