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

Perpustakaan JavaScript Gratis untuk Penguraian & Penulisan Font

Perpustakaan JavaScript Sumber Terbuka yang memungkinkan Mengurai, Membaca, dan menulis font TrueType atau OpenType. Ini mendukung Penanganan Font, Metri Glyph, dan Tata Letak Teks dalam aplikasi JS.

Di kerajaan luas desain dan pengembangan web, tipografi memainkan peran penting dalam membentuk pengalaman pengguna secara keseluruhan. Namun, bekerja dengan tipografi di web memiliki tantangan tersendiri. Untungnya, opentype.js, sebuah perpustakaan JavaScript sumber terbuka, telah muncul sebagai alat yang kuat yang memungkinkan pengembang perangkat lunak untuk memanipulasi dan memanfaatkan potensi tipografi dalam aplikasi web. Perpustakaan ini menyediakan API yang sederhana dan intuitif, menjadikannya dapat diakses oleh pengembang dengan semua tingkat keahlian. Ini memberi pengembang fleksibilitas untuk menyesuaikan dan mengadaptasi tipografi agar sesuai dengan kebutuhan desain spesifik mereka.

Opentype.js bekerja di berbagai peramban web modern, menjadikannya solusi yang andal dan konsisten untuk menerapkan fitur tipografi. Ada beberapa fitur penting dalam perpustakaan ini, seperti mekanisme parsing font yang kuat, berinteraksi dengan glif individual dalam sebuah font, dukungan tata letak teks yang kompleks, rendering berbagai font, kompatibilitas lintas peramban, mengekstrak data font secara detail, dukungan tata letak teks lanjutan, menganimasikan glif individual, dan banyak lagi. Ia terintegrasi secara mulus dengan teknologi web yang ada dan dapat digunakan dengan kanvas HTML5, SVG, atau bahkan digabungkan dengan kerangka kerja CSS dan JavaScript.

Opentype.js adalah perpustakaan JavaScript sumber terbuka yang memungkinkan pengembang web bekerja dengan font OpenType, format font yang banyak digunakan. Font OpenType menawarkan fitur tipografi lanjutan, seperti ligatur, kerning, dan substitusi glif, yang secara signifikan meningkatkan daya tarik visual dan keterbacaan teks. Dengan memanfaatkan opentype.js, pengembang perangkat lunak dapat membuka fitur-fitur ini dan mengakses data dasar font OpenType, memungkinkan mereka menciptakan pengalaman tipografi yang dinamis dan interaktif di web. Baik itu penyetelan detail tipografi atau membuat animasi tipografi yang rumit, OpenType.js adalah alat yang tak ternilai bagi siapa saja yang bersemangat tentang seni tipografi dalam dunia digital.

Previous Next

Memulai dengan Opentype.js

Cara yang disarankan untuk menginstal Opentype.js adalah menggunakan npm. Silakan gunakan perintah berikut untuk menambahkan dependensi maven ke dalam proyek Anda.

Instal Opentype.js melalui npm

 npm install opentype.js

Anda juga dapat menginstalnya secara manual; unduh file rilis terbaru langsung dari GitHub repository.

Mengakses Data Font melalui API JavaScript

Salah satu fitur utama OpenType.js adalah kemampuannya untuk mengekstrak data font yang detail hanya dengan beberapa baris kode JavaScript. Perpustakaan Opentype.js sumber terbuka telah menyediakan fungsionalitas lengkap untuk memuat dan mengakses data terkait Font di dalam aplikasi JavaScript mereka. Pengembang dapat mengakses berbagai atribut seperti nama font, informasi desainer, bentuk glif, pasangan kerning, dan banyak lagi. Informasi ini memungkinkan kontrol yang tepat atas tipografi dan memfasilitasi eksperimen kreatif. Contoh berikut menunjukkan cara memuat dan menampilkan data terkait font menggunakan perintah JavaScript.

Bagaimana Menampilkan Data Terkait Font di 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 @@ 
Perangkat Lunak Gratis

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

Membuka & Mengurai Font di dalam Aplikasi JavaScript

Perpustakaan Opentype.js sumber terbuka memungkinkan pengembang perangkat lunak untuk memuat dan mengonversi berbagai jenis font di dalam aplikasi JavaScript mereka sendiri. Perpustakaan ini menyediakan mekanisme parsing font yang kuat, memungkinkan pengembang memuat file font OpenType (WOFF, OTF, TTF) ke dalam aplikasi web mereka. Setelah font dimuat, pengembang dapat mengakses dan memanipulasi berbagai properti font, seperti bentuk glif, metrik, dan metadata. Contoh berikut menunjukkan cara Memuat berbagai jenis font seperti font WOFF, OTF, TTF di dalam aplikasi JavaScript.

Bagaimana Memuat Font 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);
})
 Indonesia