1. Produk
  2.   Font
  3.   JavaScript
  4.   Typr.js
 
  

Perpustakaan JavaScript Percuma untuk Mengurai & Memaparkan Fon

Perpustakaan Pemprosesan Fon JavaScript sumber terbuka yang menyokong Penguraian dan Pemaparan Fon TrueType serta OpenType secara langsung dalam Pelayar.

Dalam bidang pembangunan web & perisian, tipografi memainkan peranan penting dalam membentuk pengalaman pengguna secara keseluruhan. Untuk memanipulasi dan memaparkan fon dengan berkesan, pembangun bergantung pada perpustakaan yang kukuh yang mempermudah proses tersebut. Salah satu perpustakaan tersebut ialah Typr.js, perpustakaan JavaScript yang kuat khusus direka untuk penguraian dan pemaparan fon. Ia direka ringan, membolehkan integrasi cepat ke dalam projek web. Perpustakaan ini menyokong semua penyemak imbas web utama, termasuk Chrome, Firefox, Safari, dan Edge. Ini memastikan pemaparan fon yang konsisten merentasi pelbagai platform dan peranti.

Typr.js ialah perpustakaan JavaScript sumber terbuka yang kuat yang menyediakan pembangun perisian dengan penyelesaian ringan dan serba boleh untuk bekerja dengan pelbagai jenis fail fon. Ia membolehkan penguraian dan rendering fon TrueType dan OpenType secara langsung dalam pelayar, menghapuskan keperluan pemprosesan sisi pelayan. Ini menjadikan Typr.js alat yang tidak ternilai bagi pereka web dan pembangun yang ingin mengoptimumkan tipografi di laman web mereka. Perpustakaan ini menyokong sepenuhnya pelaksanaan ciri kebolehcapaian, seperti penskalaan teks, pelarasan jarak huruf, dan pemuatan fon tersuai, memenuhi keperluan pengguna yang pelbagai dan banyak lagi.

Typr.js sangat mudah untuk digunakan dan boleh digunakan dalam pelbagai aplikasi web, dari rendering teks sederhana hingga projek berkaitan tipografi yang lebih kompleks. Ia menyokong ciri-ciri memudahkan seperti memuat naik dan mengurus fon pada halaman web, menganalisis dan mengekstrak pelbagai metrik daripada fon, memanipulasi dan menata teks dalam talian dengan mudah, sokongan untuk internasionalisasi dan lokalisasi, tipografi lanjutan, dan banyak lagi. Set kumpulan ciri yang kaya, sifat ringan, dan keserasian merentasi pelayar menjadikannya alat yang sangat berharga untuk meningkatkan tipografi di web.

Previous Next

Mula Menggunakan Typr.js

Cara yang disyorkan untuk memasang Typr.js ialah menggunakan npm. Sila gunakan perintah berikut untuk menambah kebergantungan maven dalam projek anda.

Pasang Typr.js melalui npm

 npm install @fredli74/typr --save-dev

Anda juga boleh memasangnya secara manual; muat turun fail keluaran terkini secara langsung dari repositori GitHub.

Pemuatkan Fon dan Pengurusan melalui API JavaScript

Typr.js sumber terbuka telah menyediakan sokongan lengkap untuk memuatkan dan mengurus fon dalam aplikasi JavaScript. Ia mempermudah proses memuatkan dan mengurus fon pada halaman web. Ia menyokong pelbagai format fon, termasuk TrueType (TTF), OpenType (OTF), dan Web Open Font Format (WOFF), membolehkan pembangun mengintegrasikan fon tersuai ke dalam projek mereka dengan lancar. Dengan menyediakan antara muka pengurusan fon yang mudah, Typr.js membolehkan pembangun mengawal pemuatan fon dengan berkesan dan memberi keutamaan kepada subset fon untuk mengoptimumkan prestasi.

Tambah Pengurai Jadual SVG untuk Penguraian Fon Warna 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;

}

Terapkan Pemformatan Teks & Gaya melalui API JavaScript

Pustaka Typr.js sumber terbuka memudahkan pembangun perisian untuk menggunakan pelbagai jenis pemformatan teks dalam aplikasi JavaScript. Dengan Typr.js, pembangun dapat dengan mudah memanipulasi dan menggayakan teks pada halaman web. Ia menyediakan pelbagai fungsi susun atur teks, seperti pemecahan baris, penjajaran teks, dan penggabungan kata, membolehkan kawalan tepat ke atas cara teks dipaparkan. Selain itu, pustaka ini menyokong pelbagai pilihan gaya teks, termasuk jarak huruf, jarak perkataan, dan hiasan teks, membolehkan pembangun mencipta teks yang menarik secara visual dan mudah dibaca.

Terapkan Pemformatan Teks dan Gaya dalam Aplikasi 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';
});

Kerning dan Ligatur melalui API JavaScript

Typr.js membolehkan pembangun perisian memanfaatkan ciri tipografi lanjutan, seperti kerning dan ligatur, untuk meningkatkan daya tarikan visual teks. Kerning menyesuaikan jarak antara pasangan aksara tertentu untuk memperbaiki kebolehbacaan keseluruhan, manakala ligatur menggantikan urutan aksara dengan alternatif yang lebih menarik secara visual. Dengan memanfaatkan ciri‑ciri ini, pembangun dapat mencapai tipografi yang lebih halus dan harmoni di web.

 Melayu