Início / coding / Perguntas / 79544505
Accepted
lharby
Asked: 2025-03-30 19:17:47 +0800 CST

Use opentypejs para percorrer todos os glifos em uma fonte e exibi-los na página

  • 772

TL/DR: Como exibir cada glifo de um arquivo de fonte usando algum método de análise que mostre todos os caracteres.

Estou tentando criar um visualizador de glifos para uma das diversas fontes que desejo mostrar em uma página.

Atualmente tenho este codesandbox (ele é apertado, então há uma versão de página inteira aqui )

Aqui está meu JS:

import opentype from "opentype.js";
const htmlElem = document.querySelector("html");

const fontPath = "/src/resources";

const fontMap = (fontName) => {
  const url = `${fontPath}/${fontName}`;
  const buffer = fetch(url).then((res) => res.arrayBuffer());

  buffer.then((data) => {
    const wrapper = htmlElem.querySelector(".characters ul");
    const font = opentype.parse(data);
    const glyphs = font.glyphs.glyphs;
    for (const [key, value] of Object.entries(glyphs)) {
      if (value.name !== null) {
        const template = `<li>${value.name}</li>`;
        wrapper.insertAdjacentHTML("beforeend", template);
        console.log(value);
      }
    }
  });
};

fontMap("Calluna-Regular.otf");

Quando registro cada glifo, obtenho muitos dados sobre o elemento, no entanto, quero saber como acessá-lo na página usando a propriedade correta.

insira a descrição da imagem aqui

Atualmente estou tentando acessar item.nameo que funciona bem para 'A', 'B', 'C' etc., mas os números são nomeados por extenso 'um', 'dois', etc. E sinais de pontuação, acho que o nome faz sentido.

Tentei adicionar um prefixo para gerar a saída como entidades HTML, como <li>&${value.name};</li>, mas é claro que isso prefixará o padrão 'A' com um '&'.

Existe uma maneira universal de analisar cada caractere e usar alguma codificação para exibir cada item na página? Hex talvez, mas não transformar os caracteres simples. A outra coisa que eu queria saber é se certos glifos têm propriedades particulares que os distinguem. Acho que a propriedade unicode é a única que posso acessar que vai me ajudar.

Também nesta fonte a letra 'A' está unicode: 64no mapeamento, mas o caractere unicode universal para 'A' é U+0041 (ou já foi convertido usando algum sistema), não sei se isso é alguma peculiaridade do arquivo da fonte.

Qualquer ajuda será muito apreciada.

javascript

1 respostas

  1. Best Answer

    Você tem um caractere unicode específico no unicodevalor, então converta-o usando String.fromCharCode():

    const fontMap = (fontName) => {
  const url = `${fontPath}/${fontName}`;
  const buffer = fetch(url).then((res) => res.arrayBuffer());

  buffer.then((data) => {
    const wrapper = htmlElem.querySelector(".characters ul");
    const font = opentype.parse(data);
    const glyphs = font.glyphs.glyphs;
    for (const [key, value] of Object.entries(glyphs)) {
      if (value.name !== null) {
        const template = `<li>${String.fromCharCode(value.unicodes)}</li>`;
        wrapper.insertAdjacentHTML("beforeend", template);
        console.log(value);
      }
    }
  });
};
    • 2

relate perguntas