opentype.js
1.3.4
Ele fornece acesso às formas de texto do texto do navegador ou Node.JS.
Veja https://opentype.js.org/ para uma demonstração ao vivo.
glyf e PostScript cff Outines)Selecione uma das seguintes fontes no próximo exemplo:
<!-- 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'Usando o TypeScript? Veja este exemplo
Se você planeja melhorar ou depurar opentype.js, você pode:
git clone git://github.com/yourname/opentype.js.gitcd opentype.jsnpm installnpm run buildnpm run start e navegue para a pasta /docsnpm run test Isso é feito em duas etapas: primeiro, carregamos o arquivo de fonte em um 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 ( ) ; ... então nós .parse() em uma instância 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 ) ;
} )A compactação WOFF2 Brotli tem um desempenho 29% melhor do que o predecessor Woff. Mas essa compactação também é mais complexa e resultaria em uma biblioteca muito mais pesada (> 10 ×!) OpenType.js (≈120kb => ≈1400kb).
Para resolver isso: descomprimir a fonte com antecedência (por exemplo, com 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 ) ) ;Também é possível criar uma fonte do zero, definindo cada caminhos de glifo 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 ] } ) ; Depois de ter um objeto Font (da criação ou do .parse() ), você pode salvá -lo de volta como arquivo.
// 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 ( ) ;Uma fonte representa um arquivo de fonte OpenType carregado. Ele contém um conjunto de glifos e métodos para desenhar texto em um contexto de desenho ou para obter um caminho representando o texto.
glyphs : Uma lista indexada de objetos glifos.unitsPerEm : X/Y Coordenadas em fontes são armazenadas como números inteiros. Este valor determina o tamanho da grade. Os valores comuns são 2048 e 4096 .ascender : Distância da linha de base do mais alto ascendente. Nas unidades de fonte, não pixels.descender : Distância da linha de base do descendente mais baixo. Nas unidades de fonte, não pixels. Font.getPath(text, x, y, fontSize, options)Crie um caminho que represente o texto fornecido.
x : posição horizontal do início do texto. (Padrão: 0 )y : Posição vertical da linha de base do texto. (Padrão: 0 )fontSize : tamanho do texto em pixels (padrão: 72 ).options : {GlyphrenderOptions} passadas para cada glifo, veja abaixoOpções é um objeto opcional {glyphrenderOptions} contendo:
script : Script usado para determinar quais recursos aplicar (padrão: "DFLT" ou "latn" )language : Sistema de Idioma usado para determinar quais recursos aplicar (padrão: "dflt" )kerning : Se True Leve Kerning Information em consideração (Padrão: true )features : um objeto com tags de recurso OpenType como teclas e um valor booleano para ativar cada recurso. Atualmente, apenas os recursos da Ligature "liga" e "rlig" são suportados (padrão: true ).hinting : se o True usa a fonte TrueType Dynting, se disponível (padrão: false ).colorFormat : as cores do formato são convertidas para renderizar (padrão: "hexa" ). Pode ser "rgb" / "rgba" para saída rgb() / rgba() , "hex" / "hexa" para cores hexadecimais de 6/8 dígitos, ou "hsl" / "hsla" para saída hsl() / hsla() . "bgra" produz um objeto com R, G, B, A Keys (R/G/B de 0-255, A de 0-1). "raw" produz um número inteiro usado na tabela CPAL.fill : cor da fonte, a cor usada para renderizar cada glifo (padrão: "black" ) NOTA: Há também Font.getPaths() com os mesmos argumentos, que retornam uma lista de caminhos.
Font.draw(ctx, text, x, y, fontSize, options)Crie um caminho que represente o texto fornecido.
ctx : Um contexto de desenho 2D, como tela.x : posição horizontal do início do texto. (Padrão: 0 )y : Posição vertical da linha de base do texto. (Padrão: 0 )fontSize : tamanho do texto em pixels (padrão: 72 ).options : {GlyphrenderOptions} Passado para cada glifo, consulte Font.getPath()Opções é um objeto opcional que contém:
kerning : se true , leva em consideração as informações de kerning (padrão: true )features : um objeto com tags de recurso OpenType como teclas e um valor booleano para ativar cada recurso. Atualmente, apenas os recursos da Ligature "liga" e "rlig" são suportados (padrão: true ).hinting : se o True usa a fonte TrueType Dynting, se disponível (padrão: false ). Font.drawPoints(ctx, text, x, y, fontSize, options) Desenhe os pontos de todos os glifos no texto. Os pontos na curva serão desenhados em azul, os pontos fora da curva serão desenhados em vermelho. Os argumentos são os mesmos que Font.draw() .
Font.drawMetrics(ctx, text, x, y, fontSize, options)Desenhe linhas indicando medições importantes da fonte para todos os glifos no texto. Linhas pretas indicam a origem do sistema de coordenadas (ponto 0,0). Linhas azuis indicam a caixa delimitadora do glifo. A linha verde indica a largura avançada do glifo.
Font.stringToGlyphs(string)Converta a sequência em uma lista de objetos glifos. Observe que não há correspondência estrita de 1 a 1 entre a lista de string e glifos devido a possíveis substituições, como ligantes. A lista de glifos retornados pode ser maior ou menor que o comprimento da sequência fornecida.
Font.charToGlyph(char) Converta o caractere em um objeto de glifo. Retorna null se o glifo não puder ser encontrado. Observe que esta função assume que há um mapeamento individual entre o caractere dado e um glifo; Para scripts complexos, esse pode não ser o caso.
Font.getKerningValue(leftGlyph, rightGlyph) Recupere o valor do par de kerning entre o glifo esquerdo (ou seu índice) e o glifo direito (ou seu índice). Se nenhum par de kerning for encontrado, retorne 0 . O valor de kerning é agregado à largura do avanço ao calcular o espaçamento entre os glifos.
Font.getAdvanceWidth(text, fontSize, options)Retorna a largura avançada de um texto.
Isso é algo diferente de Path.getBoundingBox() ; Por exemplo, um espaço em branco com sufixo aumenta a largura avançada, mas não a caixa delimitadora ou uma letra pendente como um 'f' caligráfico, pode ter uma caixa delimitadora bastante maior do que sua largura de avanço.
Isso corresponde a canvas2dContext.measureText(text).width
fontSize : tamanho do texto em pixels (padrão: 72 ).options : {GlyphrenderOptions} , consulte Font.getPath() Font.palettes ( PaletteManager )Isso permite gerenciar as paletas e cores na tabela CPAL, sem precisar modificar a tabela manualmente.
Font.palettes.add(colors)Adicione uma nova paleta.
colors : Cores (opcionais) Para adicionar à paleta, as diferenças nas paletas existentes serão preenchidas com o padrão padrão. Font.palettes.delete(paletteIndex)Exclui uma paleta pelo seu índice baseado em zero
paletteIndex : Índice de paleta baseado em zero Font.palettes.deleteColor(colorIndex, replacementIndex)Exclui um índice de cores específico em todas as paletas e atualiza todas as camadas usando essa cor com a cor atualmente mantida no índice de substituição
colorIndex : índice da cor que deve ser excluídareplacementIndex : Índice (de acordo com a paleta antes da exclusão) da cor para substituir em camadas usando a cor para ser excluída Font.palettes.cpal()Retorna a tabela CPAL da fonte, ou falsa se não existir. Usado internamente.
Font.palettes.ensureCPAL(colors)Usado principalmente internamente. Garanta que a tabela CPAL exista ou seja preenchida com valores padrão.
colors : (opcional) As cores para preencher a criação retornam true se for criada, false se já existia. Font.palettes.extend(num)Estender todas as paletas existentes e os numpaletteentries valor
num : Número de slots de cores adicionais para adicionar a todas as paletas Font.palettes.fillPalette(palette, colors, colorCount) Preenche um conjunto de cores da paleta (de um índice de paleta ou uma matriz fornecida de valores de cores do CPAL) com um conjunto de cores, voltando ao valor de cor padrão, até uma dada contagem. Ele não modifica a paleta existente, retornando uma nova matriz! Use Font.palettes.setColor() , se necessário.
palette : Índice de paleta ou uma matriz de valores de cores do CPAL Para encher a paleta, o restante será preenchido com a cor padrãocolors : Matriz de valores de cores para preencher a paleta com, em um formato suportado como uma saída de colorFormat em {glyphrenderOptions} , consulte Font.getPath() . Os nomes de cores CSS também são suportados no contexto do navegador.colorCount : Número de cores para preencher a paleta, padrão para o valor do campo Numpaletteentries Font.palettes.getAll(colorFormat)Retorna uma variedade de matrizes de valores de cores para cada paleta, opcionalmente em um formato de cor especificado
colorFormat : (Opcional) Veja {Glyphrenderoptions} em Font.getPath() , (padrão: "hexa" ) Font.palettes.getColor(index, paletteIndex, colorFormat)Obtenha uma paleta específica pelo seu índice baseado em zero
index : Índice baseado em zero da cor na paletapaletteIndex : Índice de paleta baseado em zero (Padrão: 0)colorFormat : (Opcional) Veja {Glyphrenderoptions} em Font.getPath() , (padrão: "hexa" ) Font.palettes.get(paletteIndex, colorFormat)Obtenha uma paleta específica pelo seu índice baseado em zero
paletteIndex : Índice de paleta baseado em zerocolorFormat : (Opcional) Veja {Glyphrenderoptions} em Font.getPath() , (padrão: "hexa" ) Font.palettes.setColor(index, colors, paletteIndex)Defina uma ou mais cores em uma paleta específica por seu índice baseado em zero
index : Índice de cores baseado em zero para começar a preencher decolor : Valor da cor ou matriz de valores de cor em uma notação de cor suportada como uma saída de colorFormat em {glyphrenderOptions} , consulte Font.getPath() . Os nomes de cores CSS também são suportados no contexto do navegador.paletteIndex : Índice de paleta baseado em zero (Padrão: 0) Font.palettes.toCPALcolor(color)Converte uma corda de valor de cor em um valor de cor inteira do CPAL
color : String em uma notação de cor suportada como uma saída de colorFormat em {glyphrenderOptions} , consulte Font.getPath() . Os nomes de cores CSS também são suportados no contexto do navegador. Font.layers ( LayerManager )Isso permite gerenciar as camadas de glifos coloridas na tabela Colr, sem precisar modificar a tabela manualmente.
Font.layers.add(glyphIndex, layers, position)Adiciona uma ou mais camadas a um glifo, no final ou em uma posição específica.
glyphIndex : Índice de glifos para adicionar a (s) camada (s) a.layers : Objeto de camada {Glyph, PaletteIndex}/{Glyphid, PaletteIndex} ou matriz de objetos de camada.position : Posição para inserir as camadas em (padrão de adição no final). Font.layers.ensureCOLR()Usado principalmente internamente. Garante que a tabela Colr exista e seja preenchida com valores padrão.
Font.layers.get(glyphIndex)Pega as camadas para um glifo específico
glyphIndex retorna uma matriz de objetos de camada {glyph, paletteIndex} . Font.layers.remove(glyphIndex, start, end = start)Remove uma ou mais camadas de um glifo.
glyphIndex : Índice de glifos para remover a (s) camada (s) destart : índice para remover a camada emend : (Opcional), se fornecido, remove todas as camadas do índice de início para (e incluindo) Índice final Font.layers.setPaletteIndex(glyphIndex, layerIndex, paletteIndex)Define a propriedade PaletteIndex de uma camada de glifa colorida para um novo índice
glyphIndex : glifo na fonte por índice de glifos à base de zerolayerIndex : camada no glifo por índice de camada baseado em zeropaletteIndex : nova cor a ser definida para a camada por índice baseado em zero em qualquer paleta Font.layers.updateColrTable(glyphIndex, layers)Usado principalmente internamente. Atualiza a tabela COLR, adicionando um recorde de Baseglyph, se necessário, garantindo que seja inserido na posição correta, atualizando os numerosos e ajustando os valores do FirstLayerIndex para todos os registros de base de acordo com quaisquer deleções ou inserções.
Font.variation ( VariationManager ) O VariationManager lida com propriedades variáveis de fonte usando as tabelas de variação da fonte OpenType.
Font.variation.activateDefaultVariation()Ativa a variação padrão definindo seus dados de variação como as opções de renderização padrão da fonte. Usa a instância padrão, se disponível; Caso contrário, o padrão é as coordenadas de todos os eixos.
Font.variation.getDefaultCoordinates()Retorna as coordenadas padrão para os eixos de variação da fonte.
Font.variation.getDefaultInstanceIndex() Determina e retorna o índice da instância de variação padrão. Retorna -1 se não puder ser determinado.
-1 . Font.variation.getTransform(glyph, coords) Apenas um atalho para Font.variation.process.getTransform() .
Font.variation.getInstanceIndex(coordinates) Encontra o índice da instância de variação que corresponde às coordenadas fornecidas, ou -1 se nenhuma corresponder.
coordinates : Objeto com tags de eixo como teclas e valores de variação como valores correspondentes.-1 . Font.variation.getInstance(index)Recupera uma instância de variação específica por seu índice baseado em zero.
index : Índice baseado em zero da instância de variação.null se o índice for inválido. Font.variation.set(instanceIdOrObject)Define as coordenadas de variação a serem usadas por padrão para renderizar nas opções de renderização padrão da fonte.
instanceIdOrObject : O índice baseado em zero de uma instância de variação ou uma tags de eixo de mapeamento de objetos para valores de variação. Font.variation.get()Obtém as configurações atuais de variação das opções de renderização padrão da fonte.
Font.variation.process ( VariationProcessor ) O VariationProcessor é um componente do VariationManager , usado principalmente internamente para calcular e aplicar variações aos glifos em uma fonte variável. Ele lida com transformações e ajustes com base nos eixos e instâncias variáveis da fonte.
Font.variation.process.getNormalizedCoords(coords)Retorna coordenadas normalizadas para os eixos de variação com base nas configurações atuais.
coords : As coordenadas se opõem a normalizar (ou os coordenados de variação nas defaultRenderOptions da fonte por padrão)Font.variation.process.interpolatePoints(points, deltas, scalar)Interpola os pontos com base nos deltas fornecidos e em um valor escalar.
points : Matriz de pontos originais.deltas : Matriz of Point Deltas.scalar : valor escalar para interpolação.Font.variation.process.deltaInterpolate(original, deltaValues, scalar)Calcula o valor interpolado para um único ponto, com valores originais, deltas e um escalar.
original : valor original do ponto.deltaValues : Matriz de valores delta para o ponto.scalar : valor escalar para interpolação.Font.variation.process.deltaShift(points, deltas)Aplica valores delta aos pontos de mudança.
points : Matriz de pontos originais.deltas : Matriz de deltas para se inscrever.Font.variation.process.transformComponents(components, transformation)Transforma os componentes de um glifo usando uma matriz de transformação especificada.
components : componentes do glifo.transformation : Matriz de transformação para aplicar.Font.variation.process.getTransform(glyph, coords)Recupera uma cópia transformada de um glifo com base nas coordenadas de variação fornecidas, ou no próprio glifo se nenhuma variação foi aplicada
glyph : glifo ou índice de glifo para se transformar.coords : Objeto de coordenação de variação (ou os coordenados de variação nas defaultRenderOptions da fonte por padrão)opentype.Glyph Font.variation.process.getVariableAdjustment(adjustment)Calcula o ajuste variável para um determinado parâmetro de ajuste.
adjustment : parâmetro de ajuste.Font.variation.process.getDelta(deltas)Seleciona os valores delta apropriados de uma coleção de deltas com base nas configurações atuais de variação.
deltas : Coleção de valores delta.Font.variation.process.getBlendVector()Calcula o vetor de mistura para interpolações com base nas configurações atuais.
Um glifo é uma marca individual que geralmente corresponde a um personagem. Alguns glifos, como ligantes, são uma combinação de muitos personagens. Os glifos são os blocos básicos de construção de uma fonte.
font : uma referência ao objeto de fonte.name : o nome do glifo (por exemplo, "Aring" , "five" )unicode : o valor principal do Unicode deste glifo (pode ser undefined ).unicodes : A lista de valores Unicode para este glifo (na maioria das vezes isso será 1 , também pode estar vazio).index : O número de índice do glifo.advanceWidth : a largura para avançar a caneta ao desenhar este glifo.leftSideBearing : a distância horizontal do caractere anterior à origem ( 0, 0 ); Um valor negativo indica uma saliênciaxMin , yMin , xMax , yMax : a caixa delimitadora do glifo.path : o caminho cru e não escalado do glifo. Glyph.getPath(x, y, fontSize, options, font)Obtenha um objeto Glyph Path em escala para uso em um contexto de desenho.
x : posição horizontal do glifo. (Padrão: 0 )y : Posição vertical da linha de base do glifo. (Padrão: 0 )fontSize : Tamanho da fonte em pixels (padrão: 72 ).options : {GlyphrenderOptions} , consulte Font.getPath()font : um objeto de fonte, necessário para renderizar fontes Colr/CPAL para obter as camadas e as cores Glyph.getBoundingBox() Calcule a caixa delimitadora mínima para o caminho não escalado do glifo dado. Retorna um objeto opentype.BoundingBox que contém x1 / y1 / x2 / y2 . Se o glifo não tiver pontos (por exemplo, um caractere espacial), todas as coordenadas serão zero.
Glyph.draw(ctx, x, y, fontSize, options, font)Desenhe o glifo no contexto dado.
ctx : o contexto de desenho.x : posição horizontal do glifo. (Padrão: 0 )y : Posição vertical da linha de base do glifo. (Padrão: 0 )fontSize : Tamanho da fonte, em pixels (padrão: 72 ).options : {GlyphrenderOptions} , consulte Font.getPath()font : um objeto de fonte, necessário para renderizar fontes Colr/CPAL para obter as camadas e as cores Glyph.drawPoints(ctx, x, y, fontSize, options, font) Desenhe os pontos do glifo no contexto fornecido. Os pontos na curva serão desenhados em azul, os pontos fora da curva serão desenhados em vermelho. Os argumentos são os mesmos que Glyph.draw() .
Glyph.drawMetrics(ctx, x, y, fontSize) Desenhe linhas indicando medições importantes da fonte para todos os glifos no texto. Linhas pretas indicam a origem do sistema de coordenadas (ponto 0,0). Linhas azuis indicam a caixa delimitadora do glifo. A linha verde indica a largura avançada do glifo. Os argumentos são os mesmos que Glyph.draw() .
Glyph.toPathData(options) , Glyph.toDOMElement(options) , Glyph.toSVG(options) , Glyph.fromSVG(pathData, options) ,Atualmente, essas são apenas funções de wrapper para seus colegas em objetos de caminho (consulte a documentação lá), mas podem ser estendidos no futuro para transmitir dados de glifos para cálculo automático.
Glyph.getLayers(font)Obtém as camadas de glifo de cores para este glifo das tabelas colr/cpal da fonte especificada
Depois de ter um caminho através Font.getPath() ou Glyph.getPath() , você pode usá -lo.
commands : os comandos do caminho. Cada comando é um dicionário que contém um tipo e coordena. Veja abaixo para exemplos.fill : a cor de preenchimento do caminho. A cor é uma corda representando uma cor CSS. (Padrão: 'black' )stroke : a cor do traço do Path . A cor é uma corda representando uma cor CSS. (padrão: null ; o caminho não será acariciado)strokeWidth : a espessura da linha do Path . (Padrão: 1 , mas se stroke for null nenhum golpe será desenhado) Path.draw(ctx) Desenhe o caminho no contexto 2D fornecido. Isso usa as propriedades de fill , stroke e strokeWidth do objeto Path.
ctx : o contexto de desenho. Path.getBoundingBox() Calcule a caixa delimitadora mínima para o caminho fornecido. Retorna um objeto opentype.BoundingBox que contém x1 / y1 / x2 / y2 . Se o caminho estiver vazio (por exemplo, um caractere espacial), todas as coordenadas serão zero.
Path.toPathData(options)Converta o caminho em uma sequência de instruções de dados do caminho. Veja https://www.w3.org/tr/svg/paths.html#pathdata
options :decimalPlaces : a quantidade de locais decimais para valores de ponto flutuante. (Padrão: 2 )optimize : aplique algumas otimizações aos dados do caminho, por exemplo, removendo comandos desnecessários/duplicados (true/false, padrão: true )flipY : se deve girar o eixo y dos dados do caminho, porque os caminhos SVG e da fonte usam eixos y invertidos. ( true : Calcule a partir da caixa delimitadora, false : desativar; padrão: true )flipYBase : Valor base para o cálculo de inversão de base. Você provavelmente desejará calcular isso dos valores de ascendência e descendência da fonte. (Padrão: Calcule automaticamente a partir da caixa delimitadora dos dados do caminho) Path.toSVG(options) Converta o caminho para um elemento SVG <path> , como uma string.
options : consulte Path.toPathData() Path.fromSVG(pathData, options)Recupere o caminho dos dados do caminho SVG.
Substituindo os dados do caminho para um caminho existente:
const path = new Path ( ) ;
path . fromSVG ( 'M0 0' ) ;Ou criando um novo caminho diretamente:
const path = Path . fromSVG ( 'M0 0' ) ;pathData : uma sequência de comandos de caminho SVG ou (apenas no contexto do navegador) um SVGPathElementoptions :decimalPlaces , optimize , flipY , flipYBase : consulte Path.toPathData()scale : Valor de escala aplicado a todas as coordenadas de comando (Padrão: 1 )x / y : deslocamento aplicado a todas as coordenadas de comando no eixo x ou y (padrão: 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'} Usamos o Semver para versões.
Mit
Gostaríamos de reconhecer o trabalho de outras pessoas sem o qual o OpenType.js não seria possível:
