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

Perpustakaan JavaScript Percuma untuk Penguraian & Penulisan Fon

Perpustakaan JavaScript Sumber Terbuka yang membolehkan Mengurai, Membaca dan Menulis fon TrueType atau OpenType. Ia menyokong Pengurusan Fon, Metrik Glif & Susun Atur Teks dalam aplikasi JS.

Di dalam kerajaan luas reka bentuk dan pembangunan web, tipografi memainkan peranan penting dalam membentuk pengalaman pengguna secara keseluruhan. Namun, bekerja dengan tipografi di web mempunyai pelbagai cabaran tersendiri. Mujurlah, opentype.js, sebuah perpustakaan JavaScript sumber terbuka, telah muncul sebagai alat yang kuat yang memberi kuasa kepada pemaju perisian untuk memanipulasi dan memanfaatkan potensi tipografi dalam aplikasi web. Perpustakaan ini menyediakan API yang mudah dan intuitif, menjadikannya boleh diakses oleh pemaju pada semua tahap kemahiran. Ia memberi kuasa kepada pemaju dengan fleksibiliti untuk menyesuaikan dan mengadaptasi tipografi mengikut keperluan reka bentuk khusus mereka.

Opentype.js berfungsi merentasi pelbagai pelayar web moden, menjadikannya penyelesaian yang boleh dipercayai dan konsisten untuk melaksanakan ciri tipografi. Terdapat beberapa ciri penting dalam perpustakaan ini, seperti mekanisme penguraian fon yang kukuh, berinteraksi dengan glif individu dalam fon, sokongan susun atur teks kompleks, pelbagai rendering fon, keserasian merentas pelayar, mengekstrak data fon terperinci, sokongan susun atur teks lanjutan, menganimasi glif individu dan banyak lagi. Ia berintegrasi dengan lancar dengan teknologi web sedia ada dan boleh digunakan dengan kanvas HTML5, SVG, atau bahkan digabungkan dengan kerangka kerja CSS dan JavaScript.

Opentype.js ialah perpustakaan JavaScript sumber terbuka yang membolehkan pembangun web bekerja dengan fon OpenType, format fon yang banyak digunakan. Fon OpenType menawarkan ciri tipografi lanjutan, seperti ligatur, kerning, dan penggantian glif, yang sangat meningkatkan daya tarikan visual dan kebolehbacaan teks. Dengan memanfaatkan opentype.js, pembangun perisian dapat membuka kunci ciri-ciri ini dan mengakses data asas fon OpenType, membolehkan mereka mencipta pengalaman tipografi dinamik dan interaktif di web. Sama ada menala butiran tipografi atau mencipta animasi tipografi yang rumit, OpenType.js adalah alat yang sangat berharga bagi sesiapa yang bersemangat tentang seni tipografi dalam dunia digital.

Previous Next

Mula Menggunakan Opentype.js

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

Pasang Opentype.js melalui npm

 npm install opentype.js

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

Mengakses Data Fon melalui API JavaScript

Salah satu ciri utama OpenType.js ialah keupayaannya untuk mengekstrak data fon terperinci dengan hanya beberapa baris kod JavaScript. Perpustakaan sumber terbuka Opentype.js telah menyediakan fungsi lengkap untuk memuatkan dan mengakses data berkaitan Fon dalam aplikasi JavaScript mereka. Pembangun boleh mengakses pelbagai atribut seperti nama fon, maklumat pereka, bentuk glif, pasangan kerning, dan banyak lagi. Maklumat ini membolehkan kawalan tepat ke atas tipografi dan memudahkan percubaan kreatif. Contoh berikut menunjukkan cara memuatkan dan memaparkan data berkaitan fon menggunakan arahan JavaScript.

Bagaimana Memaparkan Data Berkaitan Fon dalam Aplikasi JavaScript?

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 @@ 
Perisian Percuma

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);
});

Buka & Huraikan Fon dalam Aplikasi JavaScript

Perpustakaan sumber terbuka Opentype.js membolehkan pembangun perisian memuatkan dan menukar pelbagai jenis fon dalam aplikasi JavaScript mereka sendiri. Perpustakaan ini menyediakan mekanisme penguraian fon yang kukuh, membolehkan pembangun memuatkan fail fon OpenType (WOFF, OTF, TTF) ke dalam aplikasi web mereka. Setelah fon dimuatkan, pembangun boleh mengakses dan memanipulasi pelbagai sifat fon, seperti bentuk glif, metrik, dan metadata. Contoh berikut menunjukkan cara Memuatkan pelbagai jenis fon seperti fon WOFF, OTF, TTF dalam aplikasi JavaScript.

Bagaimana Memuatkan Fon WOFF atau TTF melalui API JavaScript?

// 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);
})
 Melayu