我试图在Web应用程序中为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只是一些填充。 legendWidth太小。我尝试应用例如1.4,但这并不能解决所有情况。如果我不尝试使用特定的阿拉伯字体,这将非常有效。