1. Các sản phẩm
  2.   Font
  3.   JavaScript
  4.   OpenType.js
 
  

Thư viện JavaScript miễn phí cho việc phân tích và ghi phông chữ

Thư viện JavaScript nguồn mở cho phép phân tích, đọc và ghi phông chữ TrueType hoặc OpenType. Nó hỗ trợ xử lý phông chữ, các chỉ số glyph và bố cục văn bản trong các ứng dụng JS.

Trong vương quốc rộng lớn của thiết kế và phát triển web, kiểu chữ đóng vai trò then chốt trong việc định hình trải nghiệm người dùng tổng thể. Tuy nhiên, làm việc với kiểu chữ trên web có những thách thức riêng. May mắn là opentype.js, một thư viện JavaScript mã nguồn mở, đã xuất hiện như một công cụ mạnh mẽ giúp các nhà phát triển phần mềm thao tác và khai thác tiềm năng của kiểu chữ trong các ứng dụng web. Thư viện cung cấp một API đơn giản và trực quan, giúp mọi cấp độ lập trình viên đều có thể tiếp cận. Nó mang lại cho các nhà phát triển sự linh hoạt để tùy chỉnh và điều chỉnh kiểu chữ phù hợp với yêu cầu thiết kế cụ thể của họ.

Opentype.js hoạt động trên nhiều trình duyệt web hiện đại, làm cho nó trở thành một giải pháp đáng tin cậy và nhất quán cho việc triển khai các tính năng kiểu chữ. Có một số tính năng quan trọng của thư viện, chẳng hạn như cơ chế phân tích phông chữ mạnh mẽ, tương tác với các glyph riêng lẻ trong một phông chữ, hỗ trợ bố cục văn bản phức tạp, hiển thị đa dạng các phông chữ, khả năng tương thích đa trình duyệt, trích xuất dữ liệu phông chữ chi tiết, hỗ trợ bố cục văn bản nâng cao, tạo hoạt ảnh cho các glyph riêng lẻ và nhiều hơn nữa. Nó tích hợp liền mạch với các công nghệ web hiện có và có thể được sử dụng với canvas HTML5, SVG, hoặc thậm chí kết hợp với CSS và các framework JavaScript.

Opentype.js là một thư viện JavaScript mã nguồn mở cho phép các nhà phát triển web làm việc với phông chữ OpenType, một định dạng phông chữ được sử dụng rộng rãi. Phông chữ OpenType cung cấp các tính năng kiểu chữ nâng cao, như ligature, kerning và thay thế glyph, giúp tăng đáng kể sức hấp dẫn thị giác và khả năng đọc của văn bản. Bằng cách tận dụng opentype.js, các nhà phát triển phần mềm có thể mở khóa các tính năng này và truy cập dữ liệu nền của phông chữ OpenType, cho phép họ tạo ra các trải nghiệm kiểu chữ động và tương tác trên web. Dù là tinh chỉnh chi tiết kiểu chữ hay tạo ra các hoạt ảnh kiểu chữ phức tạp, OpenType.js là công cụ vô giá cho bất kỳ ai đam mê nghệ thuật chữ viết trong môi trường kỹ thuật số.

Previous Next

Bắt đầu với Opentype.js

Cách khuyến nghị để cài đặt Opentype.js là sử dụng npm. Vui lòng sử dụng lệnh sau để thêm phụ thuộc Maven vào dự án của bạn.

Cài đặt Opentype.js qua npm

 npm install opentype.js

Bạn cũng có thể cài đặt nó thủ công; tải xuống các tệp phát hành mới nhất trực tiếp từ GitHub repository.

Truy cập dữ liệu phông chữ qua API JavaScript

Một trong những tính năng chính của OpenType.js là khả năng trích xuất dữ liệu phông chữ chi tiết chỉ với vài dòng mã JavaScript. Thư viện mã nguồn mở Opentype.js đã cung cấp đầy đủ chức năng để tải và truy cập dữ liệu liên quan đến phông chữ trong các ứng dụng JavaScript của họ. Các nhà phát triển có thể truy cập các thuộc tính khác nhau như tên phông, thông tin nhà thiết kế, hình dạng glyph, cặp kerning và nhiều hơn nữa. Thông tin này cho phép kiểm soát chính xác về kiểu chữ và hỗ trợ việc thử nghiệm sáng tạo. Ví dụ dưới đây cho thấy cách tải và hiển thị dữ liệu liên quan đến phông chữ bằng các lệnh JavaScript.

Cách hiển thị dữ liệu liên quan đến phông chữ trong các ứng dụng 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 @@ 
Phần mềm miễn phí

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

Mở & Phân tích phông chữ trong các ứng dụng JavaScript

Thư viện mã nguồn mở Opentype.js cho phép các nhà phát triển phần mềm tải và chuyển đổi các loại phông chữ khác nhau trong các ứng dụng JavaScript của riêng họ. Thư viện cung cấp cơ chế phân tích phông chữ mạnh mẽ, cho phép các nhà phát triển tải các tệp phông OpenType (WOFF, OTF, TTF) vào các ứng dụng web của họ. Khi phông đã được tải, các nhà phát triển có thể truy cập và thao tác các thuộc tính phông chữ khác nhau, chẳng hạn như hình dạng glyph, số liệu và siêu dữ liệu. Ví dụ dưới đây cho thấy cách tải các loại phông chữ như WOFF, OTF, TTF trong các ứng dụng JavaScript.

Cách tải phông chữ WOFF hoặc TTF qua 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);
})
 Tiếng Việt