Используйте OpenTypejs, чтобы пройти через все глифы шрифтом и вывести их на страницуJavascript

Форум по Javascript
Ответить
Anonymous
 Используйте OpenTypejs, чтобы пройти через все глифы шрифтом и вывести их на страницу

Сообщение Anonymous »

tl/dr: как отобразить каждый глиф из файла шрифта с использованием некоторого метода анализа, который показывает все символы. JS: < /p>

Код: Выделить всё

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 = `[*]${value.name}`;
wrapper.insertAdjacentHTML("beforeend", template);
console.log(value);
}
}
});
};

fontMap("Calluna-Regular.otf");
Когда я регистрирую каждый глиф, я получаю довольно много данных о элементе, однако я хочу знать, как получить к нему доступ на странице, используя правильное свойство. item.name , который отлично работает для «a», 'b', 'c' etc, но цифры полностью названы «один», «два» и т. Д. И отметки пунктуации, я думаю, имя имеет смысл. С '&'. < /p>
Есть ли универсальный способ проанализировать каждый символ и использовать какой -то кодирование для отображения каждого элемента на странице? Хекс может быть, но не преобразовать простых персонажей. Другая вещь, которую я задавался, это то, имеют ли определенные глифы определенные свойства, которые их отличают. Я думаю, что свойство Unicode - это единственное, к чему я могу получить доступ, который поможет мне.
Также в этом шрифте буква «A» имеет Unicode: 64 в картировании, но универсальный символ Unicode для 'A' IS u+0041 (или это то, что уже конвертированное с помощью какой -то системы), я не знаю, что это какая -то особенность. ценится.

Подробнее здесь: https://stackoverflow.com/questions/795 ... o-the-page
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»