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

Yazı Tiplerini Ayrıştırma ve İşleme için Ücretsiz JavaScript Kütüphanesi

Tarayıcıda doğrudan TrueType ve OpenType yazı tiplerinin ayrıştırılması ve işlenmesini destekleyen açık kaynaklı JavaScript yazı tipi işleme kütüphanesi.

Web ve yazılım geliştirme alanında tipografi, genel kullanıcı deneyimini şekillendirmede kritik bir rol oynar. Yazı tiplerini verimli bir şekilde manipüle etmek ve render etmek için geliştiriciler, süreci basitleştiren sağlam kütüphanelere güvenir. Bu kütüphanelerden biri Typr.js'tir; yazı tipi ayrıştırma ve renderleme için özel olarak tasarlanmış güçlü bir JavaScript kütüphanesidir. Hafif olacak şekilde tasarlanmıştır, bu da web projelerine hızlı entegrasyon sağlar. Kütüphane, Chrome, Firefox, Safari ve Edge dahil olmak üzere tüm büyük web tarayıcılarını destekler. Bu, farklı platform ve cihazlarda tutarlı yazı tipi renderlamasını garanti eder.

Typr.js, çeşitli font dosyalarıyla çalışmak için hafif ve çok yönlü bir çözüm sunan güçlü bir açık kaynak JavaScript kütüphanesidir. TrueType ve OpenType fontlarının taranmasını ve tarayıcıda doğrudan render edilmesini sağlar, sunucu tarafı işleme ihtiyacını ortadan kaldırır. Bu, Typr.js'i web tasarımcıları ve web sitelerinde tipografiyi optimize etmek isteyen geliştiriciler için paha biçilmez bir araç haline getirir. Kütüphane, metin ölçeklendirme, harf aralığı ayarlamaları ve özel font yükleme gibi erişilebilirlik özelliklerinin uygulanmasını tam olarak destekler, farklı ihtiyaçları olan kullanıcıları ve daha fazlasını karşılar.

Typr.js çok kolay kullanılabilir ve basit metin render'ından daha karmaşık tipografiyle ilgili projelere kadar çeşitli web uygulamalarında kullanılabilir. Web sayfalarında fontları yükleme ve yönetme, fontlardan çeşitli metrikleri analiz etme ve çıkarma, çevrimiçi metni sorunsuz bir şekilde manipüle etme ve stil verme, uluslararasılaştırma ve yerelleştirme desteği, gelişmiş tipografi ve daha fazlası gibi özellikleri basitleştirir. Zengin özellik seti, hafif yapısı ve tarayıcılar arası uyumluluğu, web üzerindeki tipografiyi geliştirmek için vazgeçilmez bir araç haline getirir.

Previous Next

Typr.js ile Başlarken

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

Typr.js'i npm üzerinden kurun

 npm install @fredli74/typr --save-dev

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

JavaScript API ile Yazı Tipi Yükleme ve Yönetimi

Açık kaynak Typr.js, JavaScript uygulamaları içinde yazı tiplerini yükleme ve yönetme konusunda tam destek sağlamıştır. Web sayfalarında yazı tiplerini yükleme ve yönetme sürecini basitleştirir. TrueType (TTF), OpenType (OTF) ve Web Open Font Format (WOFF) gibi çeşitli yazı tipi formatlarını destekleyerek geliştiricilerin özel yazı tiplerini projelerine sorunsuz bir şekilde entegre etmelerini sağlar. Kullanışlı bir yazı tipi yönetim arayüzü sunarak, Typr.js geliştiricilerin yazı tipi yüklemesini verimli bir şekilde kontrol etmelerini ve performansı optimize etmek için yazı tipi alt kümelerini önceliklendirmelerini mümkün kılar.

SVG Renk Yazı Tipi Ayrıştırması için SVG Tablo Ayrıştırıcısı Ekleyin

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 ile Metin Biçimlendirme ve Stil Uygulama

Açık kaynak Typr.js kütüphanesi, yazılım geliştiricilerin JavaScript uygulamaları içinde çeşitli metin biçimlendirme türlerini uygulamasını kolaylaştırır. Typr.js ile geliştiriciler web sayfalarındaki metni zahmetsizce manipüle edebilir ve stil verebilir. Satır sonlandırma, metin hizalama ve heceleme gibi geniş bir metin yerleşim fonksiyonları yelpazesi sunarak metnin nasıl sunulacağı üzerinde hassas kontrol sağlar. Ayrıca, kütüphane harf aralığı, kelime aralığı ve metin süslemesi gibi çok çeşitli metin stil seçeneklerini destekleyerek geliştiricilerin görsel olarak çekici ve okunabilir metinler oluşturmasına olanak tanır.

JavaScript Uygulamalarında Metin Biçimlendirme ve Stil Uygulama

// 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 ile Kerning ve Ligatürler

Typr.js, yazılım geliştiricilerin kerning ve ligatür gibi gelişmiş tipografik özelliklerden yararlanarak metnin görsel çekiciliğini artırmasını sağlar. Kerning, belirli karakter çiftleri arasındaki boşluğu ayarlayarak genel okunabilirliği iyileştirirken, ligatürler karakter dizilerini görsel olarak hoş alternatiflerle değiştirir. Bu özelliklerden faydalanarak geliştiriciler, web üzerinde daha rafine ve uyumlu bir tipografi elde edebilir.

 Türkçe