opentype.js
1.3.4
它使您可以訪問瀏覽器或node.js的文本字母形式。
有關現場演示，請參見https://opentype.js.org/。
glyf和Postscript cff概述）在下一個示例中選擇以下來源之一：
<!-- 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.mjs" ;
parse ( ... ) ;
</ script >npm install opentype.js const opentype = require ( 'opentype.js' ) ;
import opentype from 'opentype.js'
import { load } from 'opentype.js'使用打字稿？請參閱此示例
如果您打算改進或調試OpenType.js，則可以：
git clone git://github.com/yourname/opentype.js.gitcd opentype.jsnpm install安裝所需的依賴項npm run buildnpm run start並導航到/docs文件夾npm run test是否還可以正常工作這是分兩個步驟完成的：首先，我們將字體文件加載到ArrayBuffer ...
// either from an URL
const buffer = fetch ( '/fonts/my.woff' ) . then ( res => res . arrayBuffer ( ) ) ;
// ... or from filesystem (node)
const buffer = require ( 'fs' ) . promises . readFile ( './my.woff' ) ;
// ... or from an <input type=file id=myfile> (browser)
const buffer = document . getElementById ( 'myfile' ) . files [ 0 ] . arrayBuffer ( ) ; ...然後我們將其.parse()作為Font實例
// 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 Brotli壓縮性能比WOFF前任好29％。但是，這種壓縮也更加複雜，並且會導致更重（> 10×！）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/[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 ) ) ;也可以通過定義每條字形Bézier路徑來從頭開始製作字體。
// this .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 font = new opentype . Font ( {
familyName : 'OpenTypeSans' ,
styleName : 'Medium' ,
unitsPerEm : 1000 ,
ascender : 800 ,
descender : - 200 ,
glyphs : [ notdefGlyph , aGlyph ] } ) ;有一個Font對象（從工藝或.parse() ）後，您可以將其保存為文件。
// using node:fs
fs . writeFileSync ( "out.otf" , Buffer . from ( font . toArrayBuffer ( ) ) ) ;
// using the browser to createElement a <a> that will be clicked
const href = window . URL . createObjectURL ( new Blob ( [ font . toArrayBuffer ( ) ] ) , { type : "font/opentype" } ) ;
Object . assign ( document . createElement ( 'a' ) , { download : "out.otf" , href } ) . click ( ) ;字體表示已加載的Opentype字體文件。它包含一組字形和方法，可以在圖紙上下文上繪製文本，或者獲取代表文本的路徑。
glyphs ：字形對象的索引列表。unitsPerEm ：字體中的X/y坐標作為整數存儲。該值決定網格的大小。共同值是2048和4096 。ascender ：距離最高升天的基線距離。在字體單元中，而不是像素。descender ：距離最低下降的距離。在字體單元中，而不是像素。 Font.getPath(text, x, y, fontSize, options)創建一個表示給定文本的路徑。
x ：文本開頭的水平位置。 （默認： 0 ）y ：文本基線的垂直位置。 （默認： 0 ）fontSize ：像素中的文本大小（默認值： 72 ）。options ： {glyphrenderoptions}傳遞給每個字形，請參見下文選項是一個可選{glyphrenderoptions}對象：
script ：用於確定要應用哪些功能的腳本（默認： "DFLT"或"latn" ）language ：用於確定要應用哪些功能的語言系統（默認： "dflt" ）kerning ：如果True考慮Kerning信息（默認： true ）features ：具有OPENTYPE功能標籤作為鍵的對象，以及啟用每個功能的布爾值。目前僅支持"liga"和"rlig" （默認值： true ）。hinting ：如果true使用trueType字體提示（如果可用）（默認值： false ）。colorFormat ：格式顏色轉換為渲染（默認： "hexa" ）。對於rgb() / rgba()輸出，可以是"rgb" / "rgba" ，對於6/8位數HEX顏色，可以是"hex" / "hexa" ，或者hsl() / hsla()輸出的"hsl" / "hsla" 。 "bgra"輸出一個用r，g，b，a鍵的對象（r/g/b從0-255，a起0-1）。 "raw"輸出CPAL表中使用的整數。fill ：字體顏色，用於呈現每個字形的顏色（默認： "black" ）注意：還有一個帶有相同參數的Font.getPaths() ，它返迴路徑列表。
Font.draw(ctx, text, x, y, fontSize, options)創建一個表示給定文本的路徑。
ctx ：像畫布一樣的2D圖紙上下文。x ：文本開頭的水平位置。 （默認： 0 ）y ：文本基線的垂直位置。 （默認： 0 ）fontSize ：像素中的文本大小（默認值： 72 ）。options ： {glyphrenderoptions}傳遞給每個字形，請參閱Font.getPath()選項是一個可選對象，包含：
kerning ：如果true ，請考慮Kerning信息（默認： 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)將字符串轉換為字形對象列表。請注意，由於可能取代（例如連接），字符串和字形列表之間沒有嚴格的1比1對應關係。返回的字形的列表可以比給定字符串的長度更大或更小。
Font.charToGlyph(char)將字符轉換為字形對象。如果找不到字形，返回null 。請注意，此功能假設給定特徵和字形之間存在一對一的映射。對於復雜的腳本，情況並非如此。
Font.getKerningValue(leftGlyph, rightGlyph)在左字形（或其索引）和右字形（或其索引）之間檢索Kerning對的值。如果找不到Kerning對，請返回0 。計算字形之間的間距時，kerning值將添加到高級寬度中。
Font.getAdvanceWidth(text, fontSize, options)返回文本的提前寬度。
這與Path.getBoundingBox()不同。例如，後綴的空格會增加前進寬度，但不會增加邊界框或像書法“ f”這樣的懸垂字母，可能的邊界框可能大於其前進寬度。
這對應於canvas2dContext.measureText(text).width
fontSize ：像素中的文本大小（默認值： 72 ）。options ： {glyphrenderoptions} ，請參閱Font.getPath() Font.palettes對象（ PaletteManager ）這允許在CPAL表中管理調色板和顏色，而無需手動修改表。
Font.palettes.add(colors)添加一個新的調色板。
colors ：（可選的）顏色要添加到調色板中，現有調色板的差異將充滿默認值。 Font.palettes.delete(paletteIndex)將調色板刪除基於零的索引
paletteIndex ：基於零的調色板索引Font.palettes.deleteColor(colorIndex, replacementIndex)在所有調色板中刪除特定的顏色索引，並使用該顏色使用當前在替換索引中保存的顏色進行更新
colorIndex ：應刪除的顏色索引replacementIndex ：索引（根據刪除之前的調色板），使用顏色刪除的顏色替換為層Font.palettes.cpal()返回字體的CPAL表，或者如果不存在，則false。內部使用。
Font.palettes.ensureCPAL(colors)主要在內部使用。確保CPAL表的存在或填充默認值。
colors ：（可選）填充創建的顏色如果創建創建，則返回true ，如果已經存在，則false 。 Font.palettes.extend(num)將所有現有的調色板擴展到numpaletteentries的價值，以多個顏色插槽
num ：要添加到所有調色板的其他顏色插槽的數量Font.palettes.fillPalette(palette, colors, colorCount)填充一組帶有一組顏色的調色板顏色（從調色板索引或提供的CPAL顏色值數組），落回默認的顏色值，直到給定計數。它不會修改現有調色板，而是返回一個新數組！如果需要，請使用Font.palettes.setColor() 。
palette ：調色板索引或一系列CPAL顏色值要填充調色板，其餘的將填充默認顏色colors ：顏色值數組，以填充調色板的格式為{glyphrenderoptions}中的colorFormat輸出的格式，請參見Font.getPath() 。 CSS顏色名稱在瀏覽器上下文中也得到了支持。colorCount ：填充調色板的顏色數量，默認為numpaletteentries字段的值Font.palettes.getAll(colorFormat)返回每個調色板的顏色值數組，可選為指定的顏色格式
colorFormat ：（可選）請參見Font.getPath() ，（默認： "hexa" ），請參見{glyphrenderoptions} Font.palettes.getColor(index, paletteIndex, colorFormat)通過其基於零的索引獲取特定的調色板
index ：調色板中顏色的零索引paletteIndex ：基於零的調色板索引（默認值：0）colorFormat ：（可選）請參見Font.getPath() ，（默認： "hexa" ），請參見{glyphrenderoptions} Font.palettes.get(paletteIndex, colorFormat)通過其基於零的索引獲取特定的調色板
paletteIndex ：基於零的調色板索引colorFormat ：（可選）請參見Font.getPath() ，（默認： "hexa" ），請參見{glyphrenderoptions} Font.palettes.setColor(index, colors, paletteIndex)通過基於零的索引在特定的調色板上設置一種或多種顏色
index ：基於零的顏色索引開始填充color ：在{glyphrenderoptions}中支持的colorFormat符號中的顏色值或顏色符號的數組，請參見Font.getPath() 。 CSS顏色名稱在瀏覽器上下文中也得到了支持。paletteIndex ：基於零的調色板索引（默認值：0） Font.palettes.toCPALcolor(color)將顏色值字符串轉換為CPAL整數顏色值
color ：以顏色符號為單位的字符串作為{GlyphrenderOptions}中colorFormat輸出的輸出，請參見Font.getPath() 。 CSS顏色名稱在瀏覽器上下文中也得到了支持。 Font.layers對象（ LayerManager ）這允許在COLR表中管理顏色的字形層，而無需手動修改表。
Font.layers.add(glyphIndex, layers, position)在末端或特定位置向字形添加一個或多個層。
glyphIndex ：glyph索引，將圖層添加到。layers ：圖層對象{Glyph，PaletteIndex}/{Glyphid，PaletteIndex}或圖層對象的數組。position ：將圖層插入（將默認為添加時）的位置。 Font.layers.ensureCOLR()主要在內部使用。確保Colr表的存在並帶有默認值。
Font.layers.get(glyphIndex)獲取特定字形的層
glyphIndex返回{glyph, paletteIndex}層對象的數組。 Font.layers.remove(glyphIndex, start, end = start)從字形上去除一個或多個層。
glyphIndex ：glyph索引以從start ：索引刪除圖層的索引end ：（可選）如果提供，將所有圖層從開始索引刪除到（包括）結束索引Font.layers.setPaletteIndex(glyphIndex, layerIndex, paletteIndex)將顏色字形層的PaletteIndex屬性設置為新索引
glyphIndexlayerIndex ：基於零的圖層索引在字形中的圖層paletteIndex ：在任何調色板中以零基索引為層設置的新顏色Font.layers.updateColrTable(glyphIndex, layers)主要在內部使用。更新COLR表，如果需要，添加了鹼基甘眼，確保其在正確的位置插入，更新數字儀並根據任何刪除或插入來調整所有baseGlyphrecords的firstLayerIndex值。
Font.variation對象（ VariationManager ） VariationManager使用Opentype字體變體表處理變量字體屬性。
Font.variation.activateDefaultVariation()通過將其變體數據設置為字體的默認渲染選項來激活默認變化。如果可用，請使用默認實例；否則，它將默認為所有軸的坐標。
Font.variation.getDefaultCoordinates()返回字體變化軸的默認坐標。
Font.variation.getDefaultInstanceIndex()確定並返回默認變化實例的索引。返回-1如果無法確定。
-1整數。 Font.variation.getTransform(glyph, coords)只是Font.variation.process.getTransform()的快捷方式。
Font.variation.getInstanceIndex(coordinates)找到與提供的坐標匹配的變體實例的索引，如果不匹配，則找到-1 。
coordinates ：具有軸標籤的對象為鍵，變化值作為相應值。-1的整數。 Font.variation.getInstance(index)通過其基於零的索引檢索特定的變化實例。
index ：變體實例的基於零的索引。null 。 Font.variation.set(instanceIdOrObject)將默認情況下用於在字體的默認渲染選項中渲染的變化坐標設置。
instanceIdOrObject ：變體實例的基於零的索引或對象映射軸標記變體值。 Font.variation.get()從字體的默認渲染選項中獲取當前變化設置。
Font.variation.process對象（ VariationProcessor ） VariationProcessor是VariationManager的組成部分，主要用於內部用於計算和將變體應用於變體字體中的變體。它根據字體的可變軸和實例處理轉換和調整。
Font.variation.process.getNormalizedCoords(coords)根據當前設置返回變體軸的歸一化坐標。
coords ：坐標對象正常化（默認情況下，字體的defaultRenderOptions中的變化坐標）Font.variation.process.interpolatePoints(points, deltas, scalar)基於提供的增量和標量值的點插值點。
points ：原始點的數組。deltas ：點數的數組。scalar ：插值標量值。Font.variation.process.deltaInterpolate(original, deltaValues, scalar)計算給定原始值，增量和標量的單點的插值值。
original ：點的原始價值。deltaValues ：點的增量值數組。scalar ：插值標量值。Font.variation.process.deltaShift(points, deltas)將增量值應用於移位點。
points ：原始點的數組。deltas ：要申請的三角洲陣列。Font.variation.process.transformComponents(components, transformation)使用指定的轉換矩陣轉換字形的組件。
components ：字形的組成部分。transformation ：適用的轉換矩陣。Font.variation.process.getTransform(glyph, coords)根據所提供的變化坐標檢索字形的轉換副本，或者如果未應用變化，則檢索字形本身
glyph ：字形的字形或索引轉換。coords ：變異坐標對象（或字體的defaultRenderOptions中的變化坐標）默認情況下）opentype.Glyph Font.variation.process.getVariableAdjustment(adjustment)計算給定調整參數的變量調整。
adjustment ：調整參數。Font.variation.process.getDelta(deltas)根據當前變化設置從Deltas集合中選擇適當的增量值。
deltas ：增量值的收集。Font.variation.process.getBlendVector()根據當前設置計算插值的混合矢量。
字形是通常與角色相對應的單個標記。某些字形，例如連字，是許多字符的組合。字形是字體的基本構件。
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, options, font)獲取一個縮放的字形路徑對象，用於在圖形上下文上使用。
x ：字形的水平位置。 （默認： 0 ）y ：字形基線的垂直位置。 （默認： 0 ）fontSize ：像素中的字體大小（默認值： 72 ）。options ： {glyphrenderoptions} ，請參閱Font.getPath()font ：一種字體對象，需要渲染Colr/cpal字體以獲取圖層和顏色Glyph.getBoundingBox()計算給定字形的未量化路徑的最小邊界框。返回包含x1 / y1 / x2 / y2的opentype.BoundingBox對象。如果字形沒有點（例如空間字符），則所有坐標都為零。
Glyph.draw(ctx, x, y, fontSize, options, font)在給定的上下文中繪製字形。
ctx ：圖形上下文。x ：字形的水平位置。 （默認： 0 ）y ：字形基線的垂直位置。 （默認： 0 ）fontSize ：字體大小，以像素為單位（默認值： 72 ）。options ： {glyphrenderoptions} ，請參閱Font.getPath()font ：一種字體對象，需要渲染Colr/cpal字體以獲取圖層和顏色Glyph.drawPoints(ctx, x, y, fontSize, options, font)在給定上下文中繪製字形的點。曲線點將以藍色繪製，曲線點將以紅色繪製。參數與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) ，這些目前僅是路徑對像上的對應物的包裝功能（請參閱那裡的文檔），但將來可能會擴展以傳遞Glyph數據以進行自動計算。
Glyph.getLayers(font)從指定字體的COLR/CPAL表中獲取此字形的顏色字形層
一旦有了通過Font.getPath()或Glyph.getPath()的路徑，就可以使用它。
commands ：路徑命令。每個命令都是包含類型和坐標的字典。請參閱下面的示例。fill ：路徑的填充顏色。顏色是代表CSS顏色的字符串。 （默認： 'black' ）stroke ： Path的中風顏色。顏色是代表CSS顏色的字符串。 （默認值： null ;路徑不會觸及）strokeWidth ： Path的線厚度。 （默認值： 1 ，但如果stroke為null則不會繪製任何中風） Path.draw(ctx)在給定的2D上下文上繪製路徑。這使用了路徑對象的fill ， stroke和strokeWidth屬性。
ctx ：圖形上下文。 Path.getBoundingBox()計算給定路徑的最小邊界框。返回包含x1 / y1 / x2 / y2的opentype.BoundingBox對象。如果路徑為空（例如空間字符），則所有坐標為零。
Path.toPathData(options)將路徑轉換為一串路徑數據指令。請參閱https://www.w3.org/tr/svg/paths.html#pathdata
options ：decimalPlaces ：浮點值的小數位數。 （默認： 2 ）optimize ：對路徑數據進行一些優化，例如刪除不必要/重複的命令（true/false，默認： true ）flipY ：是否要翻轉路徑數據的Y軸，因為SVG和字體路徑使用倒Y軸。 （ true ：從邊界框中計算， false ：disable;默認值： true ）flipYBase ：基本翻轉計算的基本值。您可能需要從字體的昇華和下降值中計算出來。 （默認：從路徑數據的邊界框中自動計算） Path.toSVG(options)將路徑轉換為svg <path>元素，作為字符串。
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}{type: 'L', x: 100, y: 200}{type: 'C', x1: 0, y1: 50, x2: 100, y2: 200, x: 100, y: 200}{type: 'Q', x1: 0, y1: 50, x: 100, y: 200}{type: 'Z'} 我們使用SEMVER進行版本控制。
麻省理工學院
我們要承認他人的工作，沒有哪個opentype.js是不可能的：
