opentype.js 技术文档

opentype.js 技术文档

opentype.js Read and write OpenType fonts using JavaScript. 项目地址: https://gitcode.com/gh_mirrors/op/opentype.js

opentype.js 是一个强大的JavaScript库，允许开发者在浏览器或Node.js环境中访问并操作TrueType与OpenType字体的字形。通过本文档，您将学习到如何安装此库，基本的使用方法，API详情以及如何构建和保存自定义字体。

安装指南

通过CDN

您可以选择以下任一CDN源进行快速集成：

• opentype.js.org/dist/opentype.js
• https://cdn.jsdelivr.net/npm/opentype.js
• https://unpkg.com/opentype.js

使用全局变量

<script src="https://your.favorite.cdn/opentype.js"></script>
<script>opentype.parse(...)</script>

使用模块导入（需要完整路径）

<script type="module">
import { parse } from "https://unpkg.com/opentype.js/dist/opentype.mjs";
parse(...);
</script>

通过npm包管理器

对于Node.js项目，使用npm执行以下命令安装：

npm install opentype.js

随后，在您的代码中可以这样引入：

const opentype = require('opentype.js'); // CommonJS
import opentype from 'opentype.js'; // ES模块
import { load } from 'opentype.js'; // 导入特定功能

项目使用说明

加载字体文件

加载字体通常涉及从URL或本地读取字体文件，并将其解析为Font对象。

(async () => {
  const font = await opentype.load('path/to/font.woff2');
  console.log(font);
})();

对于非异步环境，您可能需要先获取ArrayBuffer然后解析：

fetch('path/to/font.ttf')
  .then(response => response.arrayBuffer())
  .then(buffer => {
    const font = opentype.parse(buffer);
    console.log(font);
  });

创建与保存字体

不仅能加载字体，您还可以创建新的字体实例，定义每个字符的贝塞尔曲线路径。

const notdefGlyph = new opentype.Glyph({ /* ... */ });
const aGlyph = new opentype.Glyph({ /* ... */ });

const customFont = new opentype.Font({
  familyName: 'MyCustomFont',
  // 其他属性...
  glyphs: [notdefGlyph, aGlyph]
});

// 将字体保存到文件或触发下载
// 示例为Node.js环境
const fs = require('fs');
fs.writeFileSync("custom-font.otf", Buffer.from(customFont.toArrayBuffer()));

在浏览器环境下，可以通过创建Blob并模拟点击下载链接来实现字体保存。

字体对象API

创建文本路径

const ctx = document.getElementById('canvas').getContext('2d');
const path = customFont.getPath('Hello, World!', 10, 100, 72);
path.draw(ctx);

文本渲染

customFont.draw(ctx, 'Hello, World!', 10, 100, 72, { features: { liga: true } });

点和指标绘制（辅助理解字体结构）

customFont.drawPoints(ctx, 'Text', x, y, fontSize); // 绘制点
customFont.drawMetrics(ctx, 'Text', x, y, fontSize); // 绘制字体度量

API使用文档概览

• opentype.load(url[, callback]): 异步加载字体文件。
• opentype.parse(abuffer): 解析已下载的字体缓冲区。
• Font.getPath(text, x, y, fontSize[, options]): 创建代表文本的贝塞尔路径对象。
• Font.draw(ctx, text, x, y, fontSize[, options]): 直接在绘图上下文中渲染文本。
• Font.stringToGlyphs(string): 将字符串转换为字形对象列表。
• Font.charToGlyph(char): 字符到字形的映射。

注意: 更多详细的API文档和示例代码建议参考官方GitHub仓库和在线文档，以获得最新信息和最佳实践。

opentype.js Read and write OpenType fonts using JavaScript. 项目地址: https://gitcode.com/gh_mirrors/op/opentype.js