При использовании семейства шрифтов для рендеринга текста в SVG Chrome 32.0.1700.107 выберет подходящий шрифт. Но если я использую тот же SVG в качестве ввода для элемента img, используется неправильный шрифт. Если я укажу конкретный шрифт, который, как мне известно, находится в моей системе, то этот шрифт правильно отображается как в элементах svg, так и в элементах img. Простой пример:
<svg id="scalingSvg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
<rect width="99%" height="99%" fill="white" stroke="black"/>
<text id="myText" x="50%" y="50%" font-family = "monospace" font-size = "24">M~</text>
</svg>
<img id="svgImage" x="0" y="0" height="100" width="100"/>
var xml = (new XMLSerializer).serializeToString(svg);
img.src = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(xml);
Вот он на jsfiddle. В раскрывающемся списке есть общие семейства шрифтов, а также специальные шрифты. В частности, если вы установите раскрывающийся список на Courier New, результат будет таким, как я ожидаю — шрифт правильно отображается на обоих изображениях. Но если вы измените шрифт на «моноширинный», элемент SVG будет правильно находить Courier New, в то время как элемент img будет отображаться с неправильным немоноширинным шрифтом.
IE, Firefox и Safari работают так, как я и ожидал — соответствующий шрифт найден для семейства шрифтов как в элементах svg, так и в элементах img. Я нашел ошибку в Chrome, или есть тонкость в указании шрифтов, которые я просто не получаю?
