Программный доступ к спецификациям шрифтов в JavaScript

Question 1

Я хотел бы получить доступ к данным о шрифте, который я использую, для отображения данных на экране. Например, я хотел бы знать размер черных линий, которые составляют конкретный экземпляр шрифта (т. Е. Жирный курьером будет иметь букву «I» с главной вертикальной линией размером 2 пикселя для размера шрифта 10 ) и / или пространство внутри букв с пробелом в нем (т. е. B, A, но также C, O и т. д.). Я знаю, что могу получить доступ к имени используемого шрифта (или решить его самостоятельно через CSS), но дело не в знании шрифта, который я использую (или манипулирования им), а в доступе к конкретным данным об этом.

Спасибо!

Question 2

Я уверен, что это невозможно динамически.

Что вы можете сделать, так это измерение ширины текста следующим образом:

function measureWordSize(word, font) {
    var canvas = measureWordSize.canvas || (measureWordSize.canvas = document.createElement("canvas"));
    var context = canvas.getContext("2d");
    context.font = font;
    var metrics = context.measureText(word);
    return metrics.width;
}

console.log(measureWordSize("Hello World!", "Arial"));

Обратите внимание, что переменная font фактически принимает свойство css font, поэтому вы можете настроить это по своему усмотрению.

Я могу придумать следующий трюк, который вы могли бы использовать для вычисления пробела внутри букв, но это будет неточно:

Возьмем самый тонкий символ (возможно), вертикальную линию: |. Предполагая, что ширина по сторонам буквы O имеет ту же ширину, что и ширина вертикальной линии, мы можем попытаться вычислить пространство внутри:

function measureWordSize(word, font) {
    var canvas = measureWordSize.canvas || (measureWordSize.canvas = document.createElement("canvas"));
    var context = canvas.getContext("2d");
    context.font = font;
    var metrics = context.measureText(word);
    return metrics.width;
}

console.log(measureWordSize("Hello World!", "Arial"));

[ ! d9]

Мы видим, что это очень неточно. Если мы посмотрим на 3 строки, например, и одну O:

||| O

Мы видим, что в этом шрифте три | s равны примерно O. Поэтому наш ответ был точным. Но это включает пробелы между буквами. Если вам не все так важно, вы можете взять этот код и улучшить его, но это будет как можно ближе. Например, Arial имеет несогласованный интервал между буквами, поэтому вы не можете рассчитывать на это.

NonameSL · Answer 1 · 15 August 2018 в 17:01