Я пытаюсь добавить определенный шрифт в веб-приложение для арабского текста в SVG. Шрифт выглядит хорошо, но getComputedTextLength () возвращает результаты, которые являются «слишком короткими», то есть текст занимает больше места, чем при отображении. Это вызывает проблемы при попытке обернуть текст и т. Д.
Кто-нибудь знает обходной путь или исправить? Я пробовал пару разных шрифтов и получаю одинаковый результат в Chrome и Firefox.
https://fonts.google.com/specimen/Cairo
<link href="https://fonts.googleapis.com/css?family=Cairo&display=swap&subset=arabic" rel="stylesheet">
https://www.google.com/get/noto/#kufi-arab
@font-face {
font-family: 'NotoKufiArabic';
src: url('../font/NotoKufiArabic-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Пример кода d3, который дает «слишком короткие» результаты:
legend.append("text")
.text(function (d) { return d.data.label)})
.each(function(d) { d.legendWidth = this.getComputedTextLength() + 24 });
24 - это просто некоторый отступ. Ширина легенды слишком мала. Я попытался применить коэффициент, например, 1,4, но это не исправить все случаи. Это прекрасно работает, если я не пытаюсь использовать определенный арабский шрифт.