1. Các sản phẩm
  2.   Font
  3.   Node.js
  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 lĩnh vực phát triển phần mềm web và typografic kỹ thuật số, việc xử lý các tệp phông chữ và tạo ra trải nghiệm hiển thị văn bản liền mạch có thể là một nhiệm vụ khó khăn. Tuy nhiên, làm việc với các phông chữ OpenType có thể là một thách thức, đặc biệt là khi truy cập các tính năng typographic nâng cao của chúng. Đó là nơi OpenType.js xuất hiện – một thư viện mã nguồn mở cách mạng giúp dễ dàng làm việc với các phông chữ OpenType trong trình duyệt. Một trong những lợi ích chính của OpenType.js là khả năng đơn giản hoá quá trình làm việc với các phông chữ OpenType. Không giống như các thư viện khác yêu cầu kiến thức sâu rộng về công nghệ phông chữ, OpenType.js cung cấp một API trực quan giúp bắt đầu nhanh chóng.

OpenType.js là một thư viện JavaScript cung cấp API đơn giản và trực quan để truy cập các tính năng kiểu chữ nâng cao của phông chữ OpenType. Với OpenType.js, các nhà phát triển phần mềm có thể dễ dàng truy cập các tính năng như ligature, glyph thay thế, phông chữ biến đổi, và nhiều hơn nữa, cho phép họ tạo ra các thiết kế kiểu chữ phức tạp và tinh vi. Ngoài việc phân tích và thao tác các phông chữ hiện có, opentype.js còn hỗ trợ tạo các tệp phông chữ mới từ đầu. Tính năng này rất hữu ích cho các nhà phát triển muốn tạo phông chữ tùy chỉnh một cách lập trình. Là một thư viện JavaScript, opentype.js có thể được sử dụng cả trong môi trường phía máy khách và phía máy chủ, làm cho nó trở thành lựa chọn linh hoạt cho nhiều dự án. Tổng thể, đây là một thư viện mạnh mẽ và đa năng cung cấp cách đơn giản và trực quan để làm việc với phông chữ OpenType trong trình duyệt.

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 để cài đặt một cách suôn sẻ.

Cài đặt Opentype.js bằng 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.

Phân tích phông chữ trong các ứng dụng Node.js

Một trong những tính năng cốt lõi của OpenType.js là khả năng phân tích các tệp phông chữ OpenType và TrueType chỉ với vài dòng mã JavaScript. Điều này cho phép các nhà phát triển phần mềm đọc và hiểu cấu trúc của một phông chữ, bao gồm các glyph, thông tin kerning và các dữ liệu thiết yếu khác. Trong ví dụ dưới đây, phông chữ Roboto Regular được tải từ tệp TTF. Thư viện phân tích phông chữ, làm cho dữ liệu của nó sẵn sàng cho việc thao tác tiếp theo.

Cách tải và phân tích phông chữ từ tệp TTF trong Node.js??

const opentype = require('opentype.js');

// Load a font from a file
opentype.load('fonts/Roboto-Regular.ttf', function(err, font) {
    if (err) {
        console.error('Font could not be loaded:', err);
    } else {
        console.log('Font loaded successfully:', font);
        console.log('Number of glyphs:', font.numGlyphs);
    }
});

Truy cập & thao tác glyph của phông chữ trong Node.js

Thư viện mã nguồn mở Node.js OpenType.js cho phép các nhà phát triển phần mềm truy cập và thao tác các glyph riêng lẻ trong một phông chữ trong các ứng dụng Node.js. Glyph là các biểu diễn hình ảnh của ký tự trong một phông chữ. Với tính năng này, bạn có thể trích xuất các đường glyph, chỉnh sửa chúng, hoặc thậm chí tạo glyph mới. Dưới đây là một đoạn mã tải một phông chữ, lấy glyph cho ký tự "A," và sau đó phóng to glyph lên 1,5 lần kích thước gốc của nó. Phương thức toPathData() chuyển đường glyph thành dữ liệu đường SVG, có thể được sử dụng để render hoặc thao tác tiếp theo.

Cách tải phông chữ và sửa đổi glyph trong các ứng dụng Node.js?

const opentype = require('opentype.js');

// Load a font and modify a glyph
opentype.load('fonts/Roboto-Regular.ttf', function(err, font) {
    if (err) {
        console.error('Font could not be loaded:', err);
    } else {
        const glyph = font.charToGlyph('A');
        console.log('Original Glyph Path:', glyph.path.toPathData());

        // Modify the glyph path (e.g., scale it)
        glyph.path.scale(1.5);
        console.log('Scaled Glyph Path:', glyph.path.toPathData());
    }
});

Làm việc với các bảng phông chữ qua thư viện Node.js

OpenType.js cung cấp cho các nhà phát triển quyền truy cập vào các bảng phông chữ nền tảng, nơi lưu trữ thông tin chi tiết về thiết kế và số đo của phông chữ. Điều này có thể đặc biệt hữu ích cho các thao tác hoặc phân tích phông chữ nâng cao. Đoạn mã trong ví dụ sau đây minh họa cách truy cập các bảng phông chữ cụ thể, chẳng hạn như bảng head (chứa thông tin tiêu đề phông chữ) và bảng hhea (chứa các số đo tiêu đề ngang). Các bảng này cung cấp các chi tiết quan trọng có thể được sử dụng để kiểm soát chính xác việc hiển thị và bố cục phông chữ.

Cách truy cập các bảng phông chữ cụ thể và phông chữ bên trong nó bằng thư viện Node.js?

const opentype = require('opentype.js');

opentype.load('path/to/font.ttf', function(err, font) {
  if (err) {
    console.error('Font could not be loaded: ' + err);
  } else {
    // Access the 'head' table (font header)
    const headTable = font.tables.head;
    console.log('Units per Em: ' + headTable.unitsPerEm);

    // Access the 'hhea' table (horizontal header)
    const hheaTable = font.tables.hhea;
    console.log('Ascender: ' + hheaTable.ascender);
    console.log('Descender: ' + hheaTable.descender);
  }
});
 Tiếng Việt