import TextToSVG from "text-to-svg";
let svgContainer = document.querySelector('#app');
let loadSVG = function(err, textToSVG) {
if (!textToSVG) {
console.error("Font load error", err);
return;
}
textToSVG = new TextToSVG(textToSVG.font);
const attributes = {fill: '#ffffff'};
let tempSVG = '';
let alignment = 'text-align: left;';
let line = "是 design";
const options = {x: 0, y: 10, fontSize: 20, letterSpacing: 1,anchor: 'middle', attributes: attributes};
// console.log('render svg text', {line, options, expectedFontSize, zoomScale:self.props.zoomScale, ScaledPlaceholder: self.props.data.width * self.props.zoomScale})
const svg = textToSVG.getSVG(line, options);
tempSVG = tempSVG + '<div style="position:absolute; width: 100%;top:20px;'+alignment+'">' + svg + '</div>';
svgContainer.innerHTML = tempSVG
};
TextToSVG.load('https://fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.ttf', loadSVG);
Use font: https://fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.ttf
Problem: Chinese Font Shown, But fail in alphabet (become squared squared)
But browser can render alphabet character with this font without problem in console.log
Any idea, How browser work ? How can I do workaround as browser