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是不可能的：
