Open xicond opened 1 year ago
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
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