shrhdk / text-to-svg

Convert text to SVG path without native dependence.
Other
978 stars 132 forks source link

Chinese Font Shown, But fail in alphabet #72

Open xicond opened 1 year ago

xicond commented 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);