Skip to content

Chinese Font Shown, But fail in alphabet #72

Description

@xicond

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions