opentype.js首頁、文檔和下載- 使用JavaScript 讀寫OpenType 字體- 程式开发

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

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

特徵

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

安裝

通過CDN

在下一個示例中選擇以下來源之一：

<!-- 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>

通過npm包管理器

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% 。但是這種壓縮也更複雜，並且會導致opentype.js 庫更重（~120KB => ~1400KB）。

要解決這個問題：預先解壓縮字體（例如使用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/wawoff2@2.0.1/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);

寫字體

一旦你有了一個Font對象（通過使用opentype.load或從頭開始創建一個新對象），你就可以將它作為二進製文件寫回。

在瀏覽器中，您可以使用Font.download()指示瀏覽器下載二進制.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();

如果要檢查字體，請使用font.toTables() 生成一個顯示直接映射到二進制值的數據結構的對象。如果你想得到一個ArrayBuffer，使用font.toArrayBuffer()。

字體對象

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

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

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

創建表示給定文本的路徑。

• x: 文本開頭的水平位置。 （默認值：0）
• y：文本基線的垂直位置。 （默認值：0）
• fontSize: 以像素為單位的文本大小（默認值：72）。

選項是一個可選對象，包含：

• kerning: 如果為true 則考慮字距調整信息（默認值：true）
• features：一個以OpenType 功能標籤作為鍵的對象，以及一個用於啟用每個功能的布爾值。目前僅支持連字功能“liga”和“rlig”（默認值：true）。
• hinting: 如果true 使用TrueType 字體提示（如果可用）（默認值：false）。

注意：還有Font.getPaths相同的參數返迴路徑列表。

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

創建表示給定文本的路徑。

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

選項是一個可選對象，包含：

• kerning: 如果為true 則考慮字距調整信息（默認值：true）
• features：一個以OpenType 功能標籤作為鍵的對象，以及一個用於啟用每個功能的布爾值。目前僅支持連字功能“liga”和“rlig”（默認值：true）。
• hinting: 如果true 使用TrueType 字體提示（如果可用）（默認值：false）。

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

繪製文本中所有字形的點。曲線上的點將以藍色繪製，曲線外的點將以紅色繪製。參數與Font.draw.

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

畫線指示文本中所有字形的重要字體尺寸。黑線表示坐標系的原點（點0,0）。藍線表示字形邊界框。綠線表示字形的前進寬度。

Font.stringToGlyphs(string)

將字符串轉換為字形對象列表。請注意，由於可能的替換（例如連字），字符串和字形列表之間沒有嚴格的一對一對應關係。返回的字形列表可以大於或小於給定字符串的長度。

Font.charToGlyph(char)

將字符轉換為Glyph對象。如果找不到字形，則返回null。請注意，此函數假定給定字符和字形之間存在一對一映射；對於復雜的腳本，情況可能並非如此。

Font.getKerningValue(leftGlyph, rightGlyph)

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

Font.getAdvanceWidth(text, fontSize, options)

返回文本的前進寬度。

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

這對應於canvas2dContext.measureText(text).width

• fontSize: 以像素為單位的文本大小（默認值：72）。
• options: 請參見Font.getPath

字形對象

一個字形是一個單獨的標記，通常對應於一個字符。一些字形，例如連字，是許多字符的組合。字形是字體的基本構建塊。

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

Glyph.getPath(x, y, fontSize)

獲取一個縮放的字形Path 對象，我們可以在繪圖上下文中繪製。

• x: 字形的水平位置。 （默認值：0）
• y:字形基線的垂直位置。 （默認值：0）
• fontSize：以像素為單位的字體大小（默認值：72）。

Glyph.getBoundingBox()

計算給定字形的未縮放路徑的最小邊界框。返回opentype.BoundingBox包含x1/y1/x2/y2 的對象。如果字形沒有點（例如空格字符），則所有坐標都將為零。

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

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

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

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

在給定的上下文中繪製字形的點。曲線上的點將以藍色繪製，曲線外的點將以紅色繪製。參數與Glyph.draw.

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

畫線指示文本中所有字形的重要字體尺寸。黑線表示坐標系的原點（點0,0）。藍線表示字形邊界框。綠線表示字形的前進寬度。參數與Glyph.draw.

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

這些目前只是Path 對像上對應對象的包裝函數（請參閱那裡的文檔），但將來可能會擴展以傳遞Glyph 數據以進行自動計算。

路徑對象

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

• commands: 路徑命令。每個命令都是一個包含類型和坐標的字典。有關示例，請參見下文。
• fill: 的填充顏色Path。Color 是一個代表CSS color 的字符串。 （默認值：’黑色’）
• stroke: 的描邊顏色Path。Color 是一個代表CSS color 的字符串。 （默認：：null路徑不會被描邊）
• strokeWidth: 的線條粗細Path。 （默認值：1，但由於為strokenull，因此不會繪製筆劃）

Path.draw(ctx)

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

Path.getBoundingBox()

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

Path.toPathData(options)

將Path 轉換為一串路徑數據指令。請參閱https://www.w3.org/TR/SVG/paths.html#PathData

• options:
  • decimalPlaces：浮點值的小數位數。 （默認值：2）
  • optimize：對路徑數據應用一些優化，例如刪除不必要/重複的命令（true/false，默認值：true）
  • flipY：是否翻轉路徑數據的Y軸，因為SVG和字體路徑使用倒置的Y軸。 （true：從邊界框計算，false：禁用；默認值：true）
  • flipYBase：基礎翻轉計算的基礎值。您可能希望根據字體的升序值和降序值來計算它。 （默認：從路徑數據的邊界框自動計算）

Path.toSVG(options)

將路徑轉換為​​SVG 元素，作為字符串。

• options: 見Path.toPathData

Path.fromSVG(pathData, options)

從SVG 路徑數據中檢索路徑。覆蓋現有路徑的路徑數據

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

或直接創建新路徑：

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

• pathData：一串SVG 路徑命令，或者（僅在瀏覽器上下文中）一個SVGPathElement
• options:
  • decimalPlaces, optimize, flipY, flipYBase: 見Path.toPathData
  • scale：應用於所有命令坐標的縮放值（默認值：1）
  • x/ y：應用於x 或y 軸上所有命令坐標的偏移量（默認值：0）

路徑命令

• 移動到：移動到新位置。這創建了一個新的輪廓。例子：{type: 'M', x: 100, y: 200}
• Line To：從前一個位置到給定坐標畫一條線。例子：{type: 'L', x: 100, y: 200}
• Curve To : 繪製一條從當前位置到給定坐標的貝塞爾曲線。例子：{type: 'C', x1: 0, y1: 50, x2: 100, y2: 200, x: 100, y: 200}
• Quad To：繪製從當前位置到給定坐標的二次貝塞爾曲線。例子：{type: 'Q', x1: 0, y1: 50, x: 100, y: 200}
• 關閉：關閉路徑。如果描邊，這將從輪廓的第一個點到最後一個點畫一條線。例子：{type: 'Z'}