Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chinese Font Shown, But fail in alphabet #72

Open
xicond opened this issue Mar 24, 2023 · 0 comments
Open

Chinese Font Shown, But fail in alphabet #72

xicond opened this issue Mar 24, 2023 · 0 comments

Comments

@xicond
Copy link

xicond commented Mar 24, 2023

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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant