opentype.js使用 JavaScript 讀寫(xiě) OpenType 字體

opentype.js 是 TrueType 和 OpenType 字體的 JavaScript 解析器和編寫(xiě)器。

它使您可以從瀏覽器或 Node.js 訪問(wèn)文本的字母形式。

特征

• 從一段文本中創(chuàng)建一條貝塞爾曲線路徑。
• 支持復(fù)合字形（重音字母）。
• 支持 WOFF、OTF、TTF（均具有 TrueTypeglyf和 PostScriptcff輪廓）
• 支持字距調(diào)整（使用 GPOS 或 kern 表）。
• 支持連字。
• 支持 TrueType 字體提示。
• 支持阿拉伯文本渲染（參見(jiàn)問(wèn)題 #364 和 PR #359 #361）
• 可以選擇低內(nèi)存模式（參見(jiàn)#329）
• 在瀏覽器和 Node.js 中運(yùn)行。

安裝

通過(guò) CDN

在下一個(gè)示例中選擇以下來(lái)源之一：

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

<!-- using global declaration --> <script src="https://your.favorite.cdn/opentype.js"></script> <script>opentype.parse(...)</script> <!-- using module declaration (need full path) --> <script type=module> import { parse } from "https://unpkg.com/opentype.js/dist/opentype.module.js"; parse(...); </script>

通過(guò)npm包管理器

npm install opentype.js

const opentype = require('opentype.js'); import opentype from 'opentype.js' import { load } from 'opentype.js'

用法

加載 WOFF/OTF/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 <input type=file id=myfile> 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); })

加載 WOFF2 字體

WOFF2 Brotli 壓縮性能比 WOFF 前身好 29% 。但是這種壓縮也更復(fù)雜，并且會(huì)導(dǎo)致 opentype.js 庫(kù)更重（~120KB => ~1400KB）。

要解決這個(gè)問(wèn)題：預(yù)先解壓縮字體（例如使用fontello/wawoff2）。

// promise-based utility to load libraries using the good old <script> tag const loadScript = (src) => new Promise((onload) => document.documentElement.append( Object.assign(document.createElement('script'), {src, onload}) )); const buffer = //...same as previous example... // load wawoff2 if needed and wait (!) for it to be ready if (!window.Module) { const path = 'https://unpkg.com/[email protected]/build/decompress_binding.js' const init = new Promise((done) => window.Module = { onRuntimeInitialized: done}); await loadScript(path).then(() => init); } // decompress before parsing const font = opentype.parse(Module.decompress(await buffer));

加載字體（1.x 樣式）

此示例依賴于已棄用的.load()方法

// case 1: from an URL const font = opentype.load('./fonts/my.woff', {}, {isUrl: true}); // case 2: from filesystem const font = opentype.load('./fonts/my.woff', {}, {isUrl: false}); // ... play with `font` ... console.log(font.supported);

寫(xiě)字體

一旦你有了一個(gè)Font對(duì)象（通過(guò)使用opentype.load或從頭開(kāi)始創(chuàng)建一個(gè)新對(duì)象），你就可以將它作為二進(jìn)制文件寫(xiě)回。

在瀏覽器中，您可以使用Font.download()指示瀏覽器下載二進(jìn)制 .OTF 文件。該名稱基于字體名稱。

// Create the bézier paths for each of the glyphs. // Note that the .notdef glyph is required. const notdefGlyph = new opentype.Glyph({ name: '.notdef', advanceWidth: 650, path: new opentype.Path() }); const aPath = new opentype.Path(); aPath.moveTo(100, 0); aPath.lineTo(100, 700); // more drawing instructions... const aGlyph = new opentype.Glyph({ name: 'A', unicode: 65, advanceWidth: 650, path: aPath }); const glyphs = [notdefGlyph, aGlyph]; const font = new opentype.Font({ familyName: 'OpenTypeSans', styleName: 'Medium', unitsPerEm: 1000, ascender: 800, descender: -200, glyphs: glyphs}); font.download();

如果要檢查字體，請(qǐng)使用font.toTables() 生成一個(gè)顯示直接映射到二進(jìn)制值的數(shù)據(jù)結(jié)構(gòu)的對(duì)象。如果你想得到一個(gè)ArrayBuffer，使用font.toArrayBuffer()。

字體對(duì)象

Font 表示加載的 OpenType 字體文件。它包含一組字形和方法，用于在繪圖上下文中繪制文本，或獲取表示文本的路徑。

• glyphs：字形對(duì)象的索引列表。
• unitsPerEm: 字體中的 X/Y 坐標(biāo)存儲(chǔ)為整數(shù)。該值決定了網(wǎng)格的大小。常用值為 2048 和 4096。
• ascender：距最高上升者基線的距離。以字體為單位，而不是像素。
• descender：距最低下降基線的距離。以字體為單位，而不是像素。

Font.getPath(text, x, y, fontSize, options)

創(chuàng)建表示給定文本的路徑。

• x: 文本開(kāi)頭的水平位置。（默認(rèn)值：0）
• y：文本基線的垂直位置。（默認(rèn)值：0）
• fontSize: 以像素為單位的文本大?。J(rèn)值：72）。

選項(xiàng)是一個(gè)可選對(duì)象，包含：

• kerning: 如果為 true 則考慮字距調(diào)整信息（默認(rèn)值：true）
• features：一個(gè)以O(shè)penType 功能標(biāo)簽作為鍵的對(duì)象，以及一個(gè)用于啟用每個(gè)功能的布爾值。目前僅支持連字功能“l(fā)iga”和“rlig”（默認(rèn)值：true）。
• hinting: 如果 true 使用 TrueType 字體提示（如果可用）（默認(rèn)值：false）。

注意：還有Font.getPaths相同的參數(shù)返回路徑列表。

Font.draw(ctx, text, x, y, fontSize, options)

創(chuàng)建表示給定文本的路徑。

• ctx：二維繪圖上下文，如 Canvas。
• x: 文本開(kāi)頭的水平位置。（默認(rèn)值：0）
• y：文本基線的垂直位置。（默認(rèn)值：0）
• fontSize: 以像素為單位的文本大小（默認(rèn)值：72）。

選項(xiàng)是一個(gè)可選對(duì)象，包含：

• kerning: 如果為 true 則考慮字距調(diào)整信息（默認(rèn)值：true）
• features：一個(gè)以O(shè)penType 功能標(biāo)簽作為鍵的對(duì)象，以及一個(gè)用于啟用每個(gè)功能的布爾值。目前僅支持連字功能“l(fā)iga”和“rlig”（默認(rèn)值：true）。
• hinting: 如果 true 使用 TrueType 字體提示（如果可用）（默認(rèn)值：false）。

Font.drawPoints(ctx, text, x, y, fontSize, options)

繪制文本中所有字形的點(diǎn)。曲線上的點(diǎn)將以藍(lán)色繪制，曲線外的點(diǎn)將以紅色繪制。參數(shù)與Font.draw.

Font.drawMetrics(ctx, text, x, y, fontSize, options)

畫(huà)線指示文本中所有字形的重要字體尺寸。黑線表示坐標(biāo)系的原點(diǎn)（點(diǎn) 0,0）。藍(lán)線表示字形邊界框。綠線表示字形的前進(jìn)寬度。

Font.stringToGlyphs(string)

將字符串轉(zhuǎn)換為字形對(duì)象列表。請(qǐng)注意，由于可能的替換（例如連字），字符串和字形列表之間沒(méi)有嚴(yán)格的一對(duì)一對(duì)應(yīng)關(guān)系。返回的字形列表可以大于或小于給定字符串的長(zhǎng)度。

Font.charToGlyph(char)

將字符轉(zhuǎn)換為Glyph對(duì)象。如果找不到字形，則返回 null。請(qǐng)注意，此函數(shù)假定給定字符和字形之間存在一對(duì)一映射；對(duì)于復(fù)雜的腳本，情況可能并非如此。

Font.getKerningValue(leftGlyph, rightGlyph)

檢索左字形（或其索引）和右字形（或其索引）之間的字距對(duì)的值。如果未找到字距對(duì)，則返回 0。在計(jì)算字形之間的間距時(shí)，字距值會(huì)添加到提前寬度中。

Font.getAdvanceWidth(text, fontSize, options)

返回文本的前進(jìn)寬度。

這與 Path.getBoundingBox() 有所不同，例如，帶后綴的空格會(huì)增加 advancewidth 但不會(huì)增加邊界框，或者像書(shū)法 'f' 這樣的懸垂字母可能具有比其 advance 寬度大得多的邊界框。

這對(duì)應(yīng)于 canvas2dContext.measureText(text).width

• fontSize: 以像素為單位的文本大小（默認(rèn)值：72）。
• options: 請(qǐng)參見(jiàn) Font.getPath

字形對(duì)象

一個(gè)字形是一個(gè)單獨(dú)的標(biāo)記，通常對(duì)應(yīng)于一個(gè)字符。一些字形，例如連字，是許多字符的組合。字形是字體的基本構(gòu)建塊。

• font: 對(duì)象的引用Font。
• name：字形名稱（例如“Aring”、“five”）
• unicode: 這個(gè)字形的主要 unicode 值（可以是undefined）。
• unicodes: 此字形的 unicode 值列表（大多數(shù)情況下為 1，也可以為空）。
• index: 字形的索引號(hào)。
• advanceWidth: 繪制此字形時(shí)筆前進(jìn)的寬度。
• leftSideBearing：前一個(gè)字符到原點(diǎn)的水平距離（0, 0）；負(fù)值表示懸垂
• xMin, yMin, xMax, yMax：字形的邊界框。
• path：字形的原始、未縮放路徑。

Glyph.getPath(x, y, fontSize)

獲取一個(gè)縮放的字形 Path 對(duì)象，我們可以在繪圖上下文中繪制。

• x: 字形的水平位置。（默認(rèn)值：0）
• y:字形基線的垂直位置。（默認(rèn)值：0）
• fontSize：以像素為單位的字體大?。J(rèn)值：72）。

Glyph.getBoundingBox()

計(jì)算給定字形的未縮放路徑的最小邊界框。返回opentype.BoundingBox包含 x1/y1/x2/y2 的對(duì)象。如果字形沒(méi)有點(diǎn)（例如空格字符），則所有坐標(biāo)都將為零。

Glyph.draw(ctx, x, y, fontSize)

在給定的上下文中繪制字形。

• ctx：繪圖上下文。
• x: 字形的水平位置。（默認(rèn)值：0）
• y:字形基線的垂直位置。（默認(rèn)值：0）
• fontSize：字體大小，以像素為單位（默認(rèn)值：72）。

Glyph.drawPoints(ctx, x, y, fontSize)

在給定的上下文中繪制字形的點(diǎn)。曲線上的點(diǎn)將以藍(lán)色繪制，曲線外的點(diǎn)將以紅色繪制。參數(shù)與Glyph.draw.

Glyph.drawMetrics(ctx, x, y, fontSize)

畫(huà)線指示文本中所有字形的重要字體尺寸。黑線表示坐標(biāo)系的原點(diǎn)（點(diǎn) 0,0）。藍(lán)線表示字形邊界框。綠線表示字形的前進(jìn)寬度。參數(shù)與Glyph.draw.

Glyph.toPathData(options), Glyph.toDOMElement(options), Glyph.toSVG(options), Glyph.fromSVG(pathData, options),

這些目前只是 Path 對(duì)象上對(duì)應(yīng)對(duì)象的包裝函數(shù)（請(qǐng)參閱那里的文檔），但將來(lái)可能會(huì)擴(kuò)展以傳遞 Glyph 數(shù)據(jù)以進(jìn)行自動(dòng)計(jì)算。

路徑對(duì)象

一旦有了通過(guò)Font.getPath或 的路徑Glyph.getPath，就可以使用它。

• commands: 路徑命令。每個(gè)命令都是一個(gè)包含類型和坐標(biāo)的字典。有關(guān)示例，請(qǐng)參見(jiàn)下文。
• fill: 的填充顏色Path。Color 是一個(gè)代表CSS color 的字符串。（默認(rèn)值：'黑色'）
• stroke: 的描邊顏色Path。Color 是一個(gè)代表CSS color 的字符串。（默認(rèn)：：null路徑不會(huì)被描邊）
• strokeWidth: 的線條粗細(xì)Path。（默認(rèn)值：1，但由于為strokenull，因此不會(huì)繪制筆劃）

Path.draw(ctx)

在給定的 2D 上下文中繪制路徑。這使用對(duì)象的fill,stroke和strokeWidth屬性Path。

• ctx：繪圖上下文。

Path.getBoundingBox()

計(jì)算給定路徑的最小邊界框。返回opentype.BoundingBox包含 x1/y1/x2/y2 的對(duì)象。如果路徑為空（例如空格字符），則所有坐標(biāo)都將為零。

Path.toPathData(options)

將 Path 轉(zhuǎn)換為一串路徑數(shù)據(jù)指令。請(qǐng)參閱https://www.w3.org/TR/SVG/paths.html#PathData

• options:
  • decimalPlaces：浮點(diǎn)值的小數(shù)位數(shù)。（默認(rèn)值：2）
  • optimize：對(duì)路徑數(shù)據(jù)應(yīng)用一些優(yōu)化，例如刪除不必要/重復(fù)的命令（true/false，默認(rèn)值：true）
  • flipY：是否翻轉(zhuǎn)路徑數(shù)據(jù)的Y軸，因?yàn)镾VG和字體路徑使用倒置的Y軸。（true：從邊界框計(jì)算，false：禁用；默認(rèn)值：true）
  • flipYBase：基礎(chǔ)翻轉(zhuǎn)計(jì)算的基礎(chǔ)值。您可能希望根據(jù)字體的升序值和降序值來(lái)計(jì)算它。（默認(rèn)：從路徑數(shù)據(jù)的邊界框自動(dòng)計(jì)算）

Path.toSVG(options)

將路徑轉(zhuǎn)換為 ??SVG <path> 元素，作為字符串。

• options: 見(jiàn) Path.toPathData

Path.fromSVG(pathData, options)

從 SVG 路徑數(shù)據(jù)中檢索路徑。覆蓋現(xiàn)有路徑的路徑數(shù)據(jù)

const path = new Path(); path.fromSVG('M0 0');

或直接創(chuàng)建新路徑：

const path = Path.fromSVG('M0 0');

• pathData：一串 SVG 路徑命令，或者（僅在瀏覽器上下文中）一個(gè)SVGPathElement
• options:
  • decimalPlaces, optimize, flipY, flipYBase: 見(jiàn) Path.toPathData
  • scale：應(yīng)用于所有命令坐標(biāo)的縮放值（默認(rèn)值：1）
  • x/ y：應(yīng)用于 x 或 y 軸上所有命令坐標(biāo)的偏移量（默認(rèn)值：0）

路徑命令

• 移動(dòng)到：移動(dòng)到新位置。這創(chuàng)建了一個(gè)新的輪廓。例子：{type: 'M', x: 100, y: 200}
• Line To：從前一個(gè)位置到給定坐標(biāo)畫(huà)一條線。例子：{type: 'L', x: 100, y: 200}
• Curve To : 繪制一條從當(dāng)前位置到給定坐標(biāo)的貝塞爾曲線。例子：{type: 'C', x1: 0, y1: 50, x2: 100, y2: 200, x: 100, y: 200}
• Quad To：繪制從當(dāng)前位置到給定坐標(biāo)的二次貝塞爾曲線。例子：{type: 'Q', x1: 0, y1: 50, x: 100, y: 200}
• 關(guān)閉：關(guān)閉路徑。如果描邊，這將從輪廓的第一個(gè)點(diǎn)到最后一個(gè)點(diǎn)畫(huà)一條線。例子：{type: 'Z'}