opentype.js
1.3.4
Это дает вам доступ к письмам текста из браузера или узла.
Смотрите 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'Использование TypeScript? Смотрите этот пример
Если вы планируете улучшить или отладку opentype.js, вы можете:
git clone git://github.com/yourname/opentype.js.gitcd opentype.jsnpm installnpm run buildnpm run start и перейдите в папку /docsnpm 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 Compression выполняет 29% лучше, чем предшественник WOFF. Но это сжатие также более сложное и приведет к гораздо более тяжелой (> 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 ) ) ;Также возможно создать шрифт с нуля, определяя каждый глиф -пузырь.
// 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 принимает во внимание информацию о кернинге (по умолчанию: true )features : объект с тегами функций OpenType в качестве ключей и логическим значением для включения каждой функции. В настоящее время поддерживаются только функции лигатуры "liga" и "rlig" (по умолчанию: true ).hinting : если True использует подсказку TrueType Font, если доступно (по умолчанию: false ).colorFormat : цвета формата преобразуются для рендеринга (по умолчанию: "hexa" ). Может быть "rgb" / "rgba" для rgb() / rgba() , "hex" / "hexa" для 6/8 -цифрных цветов шестнадцатеричного шестигранника, или "hsl" / "hsla" для вывода hsl() / hsla() . "bgra" выводит объект с r, g, b, клавиши (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 , учитывает информацию о кернинге (по умолчанию: true )features : объект с тегами функций OpenType в качестве ключей и логическим значением для включения каждой функции. В настоящее время поддерживаются только функции лигатуры "liga" и "rlig" (по умолчанию: true ).hinting : если True использует подсказку TrueType Font, если доступно (по умолчанию: false ). Font.drawPoints(ctx, text, x, y, fontSize, options) Нарисуйте точки всех глифов в тексте. Точки на кривой будут нарисованы синим цветом, точки вне кривой будут нарисованы красным. Аргументы такие же, как и Font.draw() .
Font.drawMetrics(ctx, text, x, y, fontSize, options)Нарисуйте линии, указывающие важные измерения шрифта для всех глифов в тексте. Черные линии указывают происхождение системы координат (точка 0,0). Синие линии указывают на границу глифа. Зеленая линия указывает на продвижение ширины глифа.
Font.stringToGlyphs(string)Преобразуйте строку в список объектов Glyph. Обратите внимание, что между строкой и списком глифа нет строгой соответствия от 1 о 1 из-за возможных замен, таких как лигатуры. Список возвращаемых глифов может быть больше или меньше длины заданной строки.
Font.charToGlyph(char) Преобразовать символ в объект Glyph. Возвращает null если глиф не может быть найден. Обратите внимание, что эта функция предполагает, что между данным символом и глифом существует отображение один к одному; Для сложных сценариев это может быть не так.
Font.getKerningValue(leftGlyph, rightGlyph) Получите значение пары кернина между левым глифом (или его индексом) и правым глифом (или его индексом). Если пара кернинг не найдена, верните 0 . Значение кернина добавляется к расширенной ширине при расчете расстояния между глифами.
Font.getAdvanceWidth(text, fontSize, options)Возвращает аванс ширину текста.
Это что -то отличное от Path.getBoundingBox() ; Например, суффиксное пробел увеличивает прогибу, но не ограничивающая коробка или нависающая буква, подобная каллиграфической «F», может иметь довольно большую ограничивающую коробку, чем его расширенная ширина.
Это соответствует canvas2dContext.measureText(text).width
fontSize : размер текста в пикселях (по умолчанию: 72 ).options : {glyphrenderoptions} , см. Font.getPath() Font.palettes Object ( PaletteManager )Это позволяет управлять палитрами и цветами в таблице CPAL, без необходимости модифицировать таблицу вручную.
Font.palettes.add(colors)Добавьте новую палитру.
colors : (необязательно) Цвета. Font.palettes.delete(paletteIndex)Удаляет палитру по его нулевому индексу
paletteIndex : индекс палитры на основе нуля Font.palettes.deleteColor(colorIndex, replacementIndex)Удаляет определенный индекс цвета во всех палитрах и обновляет все слои, используя этот цвет с цветом, который в настоящее время удерживается в индексе замены
colorIndex : указатель цвета, который должен быть удаленreplacementIndex : Индекс (в соответствии с палитрой перед удалением) цвета для замены в слоях, используя цвет, чтобы быть удаленным Font.palettes.cpal()Возвращает таблицу CPAL за шрифт или ложь, если ее не существует. Используется внутри.
Font.palettes.ensureCPAL(colors)В основном используется внутри. Убедитесь, что таблица CPAL существует или заполняется значениями по умолчанию.
colors : (необязательно) Цвета для заполнения при создании возвращают true если оно было создано, false если оно уже существовало. Font.palettes.extend(num)Расширить все существующие палитры и значение NumpaletteTries по ряду цветовых слотов
num : количество дополнительных цветовых слотов, чтобы добавить ко всем палитрам Font.palettes.fillPalette(palette, colors, colorCount) Заполняет набор цветов палитры (из индекса палитры или предоставленного массива значений цвета CPAL) с набором цветов, возвращающихся к значению цвета по умолчанию, до данного количества. Он не модифицирует существующую палитру, возвращая новый массив вместо этого! Используйте Font.palettes.setColor() вместо этого, если это необходимо.
palette : индекс палитры или массив значений цвета CPAL для заполнения палитра, остальные будут заполнены цветом по умолчаниюcolors : массив значений цвета, чтобы заполнить палитру, в формате, поддерживаемом как выход colorFormat в {Glyphrenderoptions} , см. Font.getPath() . Цветовые названия CSS также поддерживаются в контексте браузера.colorCount : Количество цветов, чтобы заполнить палитру, по умолчанию значения поля NumpaletteTries Font.palettes.getAll(colorFormat)Возвращает массив массивов значений цвета для каждой палитры, при желании в указанном цветовом формате
colorFormat : (необязательно) См. {Glyphrenderoptions} at Font.getPath() , (по умолчанию: "hexa" ) Font.palettes.getColor(index, paletteIndex, colorFormat)Получите конкретную палитру по его индексу на основе нуля
index : индекс цвета на основе нуля в палитреpaletteIndex : индекс палитры на основе нуля (по умолчанию: 0)colorFormat : (необязательно) См. {Glyphrenderoptions} at Font.getPath() , (по умолчанию: "hexa" ) Font.palettes.get(paletteIndex, colorFormat)Получите конкретную палитру по его индексу на основе нуля
paletteIndex : индекс палитры на основе нуляcolorFormat : (необязательно) См. {Glyphrenderoptions} at Font.getPath() , (по умолчанию: "hexa" ) Font.palettes.setColor(index, colors, paletteIndex)Установите один или несколько цветов на определенной палитре по ее индексу на основе нуля
index : индекс цвета на основе нуля, чтобы начать заполнение сcolor : значение цвета или массив значений цвета в цветовой нотации, поддерживаемой как выход colorFormat в {Glyphrenderoptions} , см. Font.getPath() . Цветовые названия CSS также поддерживаются в контексте браузера.paletteIndex : индекс палитры на основе нуля (по умолчанию: 0) Font.palettes.toCPALcolor(color)Преобразует строку значения цвета в целочисленное значение CPAL.
color : строка в цветовой нотации, поддерживаемой как выход colorFormat в {glyphrenderoptions} , см. Font.getPath() . Цветовые названия CSS также поддерживаются в контексте браузера. Font.layers ( LayerManager )Это позволяет управлять цветными глифами слоями в таблице COLR, без необходимости модифицировать таблицу вручную.
Font.layers.add(glyphIndex, layers, position)Добавляет один или несколько слоев в глиф, в конце или в определенном положении.
glyphIndex : Glyph Index, чтобы добавить слой (ы) в.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 Index для удаления слоя (ы) изstart : индекс для удаления слоя наend : (необязательно) Если предоставлено, удаляет все слои из индекса Start в (и включать) индекс End Font.layers.setPaletteIndex(glyphIndex, layerIndex, paletteIndex)Устанавливает свойство PaletteIndex Color Glyph Layer на новый индекс
glyphIndex : Glyph в шрифте с помощью индекса Glyph на основе нуляlayerIndex : слой в глифе с помощью индекса слоя на основе нуляpaletteIndex : новый цвет, чтобы установить для слоя с помощью индекса на основе нуля в любой палитре Font.layers.updateColrTable(glyphIndex, layers)В основном используется внутри. Обновляет таблицу COLR, добавляя Baseglyphrecord, если это необходимо, гарантируя, что она вставлена в правильное положение, обновляя Numlayers и настраивая значения FirstLayerIndex для всех BaseGlyphRecords в соответствии с любыми удалениями или вставками.
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)Интерполирует точки на основе предоставленных Deltas и скалярного значения.
points : массив оригинальных очков.deltas : массив Point Deltas.scalar : скалярное значение для интерполяции.Font.variation.process.deltaInterpolate(original, deltaValues, scalar)Вычисляет интерполированное значение для одной точки заданных исходных значений, Deltas и скаляр.
original : исходное значение точки.deltaValues : массив значений дельты для этой точки.scalar : скалярное значение для интерполяции.Font.variation.process.deltaShift(points, deltas)Применяет значения дельты к точкам смены.
points : массив оригинальных очков.deltas : массив 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)Выбирает соответствующие значения Delta из коллекции 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)Получите масштабированный объект Path Glyph для использования в контексте чертежа.
x : горизонтальное положение глифа. (по умолчанию: 0 )y : Вертикальное положение базовой линии глифа. (по умолчанию: 0 )fontSize : размер шрифта в пикселях (по умолчанию: 72 ).options : {glyphrenderoptions} , см. Font.getPath()font : объект шрифта, необходимый для отображения шрифтов COLR/CPAL, чтобы получить слои и цвета Glyph.getBoundingBox() Рассчитайте минимальный ограничивающий ящик для неквалифицированного пути данного глифа. Возвращает объект opentype.BoundingBox , который содержит x1 / y1 / x2 / y2 . Если у глифа нет точек (например, космический символ), все координаты будут равны нулю.
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 : команды PATH. Каждая команда представляет собой словарь, содержащий тип и координаты. Смотрите ниже для примеров.fill : Цвет наполнения пути. Цвет - это строка, представляющая цвет CSS. (по умолчанию: 'black' )stroke : цвет хода Path . Цвет - это строка, представляющая цвет CSS. (По умолчанию: null ; путь не будет поглашен)strokeWidth : толщина линии Path . (По умолчанию: 1 , но если stroke не будет null , не будет нарисован) Path.draw(ctx) Нарисуйте путь в данном 2D контексте. Это использует свойства fill , stroke и strokeWidth объекта Path.
ctx : контекст рисования. Path.getBoundingBox() Рассчитайте минимальное ограничительное ящик для данного пути. Возвращает объект opentype.BoundingBox , который содержит x1 / y1 / x2 / y2 . Если путь пуст (например, космический символ), все координаты будут равны нулю.
Path.toPathData(options)Конвертировать путь в строку инструкций по данным пути. См. Https://www.w3.org/tr/svg/paths.html#pathdata
options :decimalPlaces : количество десятичных мест для значений с плавающей точкой. (По умолчанию: 2 )optimize : примените некоторые оптимизации к данным пути, например, удаление ненужных/дубликатов (TRUE/ trueflipY : переворачивать оси 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 : либо строка команд Path Svg, либо (только в контексте браузера) SVGPathElementoptions :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 не был бы возможен:
