Почему ширина и высота текста SVG, отображаемого браузером, не соответствуют ширине и высоте в файле шрифта?

Question

Я использую множество инструментов для создания шрифтов, чтобы определить ширину и высоту шрифта, а ширина и высота моего рендеринга svg-текста в браузере кажутся несовместимыми?

Из-за чего в браузере появляются лишние пробелы?

Вот пример

Как рассчитать его истинную высоту без использования dom?

Answer 1

Шрифты должны позволять символам опускаться ниже линии шрифта, например p, y, g. Та часть буквы, которая спускается ниже нормальной линии шрифта, называется нижним элементом

Точно так же шрифты могут иметь части, например акценты, которые отображаются над нормальным верхом большинства букв, называемых ascenders

Тот факт, что выбранные вами буквы не имеют ни того, ни другого, не означает, что шрифт не позволяет их использовать. Вы бы не хотели, чтобы ваш текст смещался только потому, что вы добавляете одну дополнительную букву, которая содержит верхний или нижний элемент. если вы хотите получить эту информацию, но SVG не предоставляет API, которые могли бы получить эту информацию.