Switch fonts in the h5 page in Android

in the development process, there is a requirement that the wireless transmission device sends a string of characters to Android, which Android accepts and forwards to the front-end page.

The

field is shaped like font-family:" boldface"

the front end wants to change the font of the page according to the transmitted characters, and the problem arises quietly.

in windows systems, you can call the "boldface" font library directly. However, it doesn"t work in Android. After testing, it is found that you can customize it through @ font-face

font, after you specify the Android font file, you can call the font library.

but how to dynamically switch src paths in font-face ? To ensure that the font of the h5 page can be switched normally in Android.

< hr >

after guidance, the solution process is as follows:
1. Font switching should take into account whether the original style exists-> if so, delete the style tag and add a new tag
2. Font switching takes into account whether the previous style exists-> if so, delete all styles within the style tag and add a new style

method 1 is similar in time to method 2, but when it comes to deleting nodes, I choose 2 to be on the safe side.
there is a 5ms-10ms whiteboard screen for switching fonts for the first time, but I don"t know why. The trouble knows the reason the big god, does not hesitate to give advice!

attach demo code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>

<body>
    <section>
        
    </section>
</body>
<script>
const xsStyle = `@font-face{
                        font-family:myFont;
                        src:url(./xingshu.TTF);
                    }
                    section p{
                        font-family:myFont;
                    }`;
const ftStyle = `@font-face{
                        font-family:myFont;
                        src:url(./msjh.ttf);
                    }
                    section p{
                        font-family:myFont;
                    }`;
window.onload = function() {
    let count = 0;
    let style = "";
    setInterval(function() {
        countPP;
        if (count == 1) {
            style = ftStyle;
        } else {
            style = xsStyle;
            count = 0;
        }
        changeFont(style);
    }, 3000);

}

// method 2

function changeFont(style) {
    let headEleNode = document.getElementsByTagName("head")[0];
    let headChildNode = headEleNode.children;
    let childList = headChildNode.length;
    let styleNode = document.createElement("style");
    for (let i = 0; i < childList; iPP) {
        if (headChildNode[i].tagName == "STYLE") {
            headChildNode[i].innerHTML = style;
            return;
        }
    }
    styleNode.type = "text/css";
    styleNode.innerHTML = style;
    headEleNode.appendChild(styleNode);
}

// method 1

// function changeFont(style) {
//     let headEleNode = document.getElementsByTagName("head")[0];
//     let headChildNode = headEleNode.children;
//     let childList = headChildNode.length;
//     let styleNode = document.createElement("style");
//     for (let i = 0; i < childList; iPP) {
//         if (headChildNode[i].tagName == "STYLE") {
//             headEleNode.removeChild(headChildNode[i]);
//         }
//     }
//     styleNode.type = "text/css";
//     styleNode.innerHTML = style;
//     headEleNode.appendChild(styleNode);
// }
</script>

</html>

Summary: due to a weak foundation, it is considered that style cannot operate, which leads to problems. Thank you very much for your parsing. In addition, it takes a long time to create a tag for the first time, but it doesn"t take a long time to create a tag again. I don"t know what the reason is. Please give me some advice.

function changeFont(url){ var doc=document; var link=doc.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribute("type", "text/css"); link.setAttribute("href", url); var heads = doc.getElementsByTagName("head"); if(heads.length) heads[0].appendChild(link); else doc.documentElement.appendChild(link); }

var newFont = "@font-face { font-family: myFont; src: url('aa.ttf'), url('aa.eot'); } div { font-family:myFont; }" function addStyleNode( str){ var styleNode=document.createElement("style"); styleNode.type="text/css"; if( styleNode.styleSheet){ styleNode.styleSheet.cssText= str; }else{ styleNode.innerHTML=str; } document.getElementsByTagName("head")[0].appendChild( styleNode ); } addStyleNode(newFont);