1. 产品
  2.   Font
  3.   JavaScript
  4.   OpenType.js
 
  

免费 JavaScript 字体解析与写入库

开源 JavaScript 库，可解析、读取和写入 TrueType 或 OpenType 字体。它支持在 JS 应用中进行字体处理、字形度量和文本布局。

在广阔的网页设计与开发领域，排版在塑造整体用户体验方面起着关键作用。然而，在网页上使用排版也面临一系列挑战。值得庆幸的是，opentype.js 这款开源的 JavaScript 库已经成为一把强大的工具，使软件开发者能够在网页应用中操作并利用排版的潜力。该库提供了简洁直观的 API，适用于各个技术水平的开发者。它为开发者提供了灵活性，能够根据特定的设计需求自定义和调整排版。

Opentype.js 在广泛的现代网页浏览器中运行，使其成为实现排版功能的可靠且一致的解决方案。该库包含多个重要特性，例如强大的字体解析机制、与字体中的单个字形交互、复杂的文本布局支持、各种字体渲染、跨浏览器兼容性、提取详细的字体数据、高级文本布局支持、对单个字形进行动画处理等。它能够无缝集成现有的网页技术，可与 HTML5 canvas、SVG，甚至与 CSS 和 JavaScript 框架结合使用。

Opentype.js 是一个开源的 JavaScript 库，允许网页开发者使用 OpenType 字体，这是一种广泛使用的字体格式。OpenType 字体提供高级排版特性，如连字、字距调整和字形替换，极大提升文本的视觉吸引力和可读性。通过利用 opentype.js，软件开发者可以解锁这些特性并访问 OpenType 字体的底层数据，使他们能够在网页上创建动态和交互式的排版体验。无论是微调排版细节还是创建复杂的排版动画，Opentype.js 对于任何热衷于数字领域排版艺术的人来说都是一款不可或缺的工具。

Previous Next

Opentype.js 入门指南

推荐的 Opentype.js 安装方式是使用 npm。请使用以下命令在项目中添加 Maven 依赖。

通过 npm 安装 Opentype.js

 npm install opentype.js

您也可以手动安装；直接从 GitHub 仓库下载最新发布文件。

通过 JavaScript API 访问字体数据

OpenType.js 的关键特性之一是只需几行 JavaScript 代码即可提取详细的字体数据。开源的 Opentype.js 库提供了完整的功能，能够在 JavaScript 应用程序中加载和访问与字体相关的数据。开发者可以获取诸如字体名称、设计者信息、字形轮廓、字距对等各种属性，以及更多内容。这些信息使得对排版的精确控制成为可能，并促进创意实验。下面的示例展示了如何使用 JavaScript 命令加载并显示与字体相关的数据。

如何在 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 @@ 
免费软件

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

在 JavaScript 应用中打开并解析字体

开源的 Opentype.js 库使软件开发者能够在自己的 JavaScript 应用中加载和转换各种类型的字体。该库提供了强大的字体解析机制，允许开发者将 OpenType（WOFF、OTF、TTF）字体文件加载到网页应用中。字体加载后，开发者可以访问和操作各种字体属性，如字形轮廓、度量信息和元数据。下面的示例展示了如何在 JavaScript 应用中加载诸如 WOFF、OTF、TTF 等各种类型的字体。

如何通过 JavaScript API 加载 WOFF 或 TTF 字体？

// 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);
})
 中国人