在安卓中切換h5頁面中的字體

在開發(fā)過程中，有這么一個需求，無線傳輸設(shè)備給安卓傳送一串字符，安卓接受并轉(zhuǎn)發(fā)給前端頁面。

字段形如：font-family:'黑體'

前端要根據(jù)傳輸過來的字符進(jìn)行變更頁面的字體，問題悄無聲息的出現(xiàn)了......

在windows系統(tǒng)中，可以直接調(diào)用'黑體'字體庫。在安卓中卻行不通，在經(jīng)過測試以后發(fā)現(xiàn)，可以通過@font-face自定義

字體，指定安卓系統(tǒng)字體文件后，就可以調(diào)用字體庫。

但是，如何進(jìn)行動態(tài)的切換font-face中的src路徑呢？以保證可以正常的在安卓系統(tǒng)中切換h5頁面的字體。

=======================================================================================

經(jīng)過指點，解決過程如下：
1.字體切換要考慮到原先的樣式是否存在-->如果存在則刪除style標(biāo)簽重新添加新的標(biāo)簽
2.字體切換要考慮到原先的樣式是否存在-->如果存在則刪除style標(biāo)簽內(nèi)所有樣式重新添加新的樣式

方法1中與方法2在時間上差不多，但是涉及到刪除節(jié)點，保險起見，我還是選擇2了。
首次切換字體存在5ms-10ms的白板畫面，具體原因不知道... 麻煩知道原因的大神，不吝賜教！

附上demo代碼：

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

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

<body>
    <section>
        <p>我愛中華人民共和國啊?。。?lt;/p>
    </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() {
        count++;
        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; i++) {
        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; i++) {
//         if (headChildNode[i].tagName == 'STYLE') {
//             headEleNode.removeChild(headChildNode[i]);
//         }
//     }
//     styleNode.type = 'text/css';
//     styleNode.innerHTML = style;
//     headEleNode.appendChild(styleNode);
// }
</script>

</html>

總結(jié)：由于基礎(chǔ)薄弱，認(rèn)為style無法進(jìn)行操作，所以導(dǎo)致問題的出現(xiàn)。非常感謝大神的解析，另外首次創(chuàng)建標(biāo)簽時，需要花費較長時間，而再次創(chuàng)建標(biāo)簽時則不需要花費較長時間，不知道原因是什么，麻煩知道的大神賜教~~~

回答

編輯回答

菊外人

如果事先寫好css文件，可以動態(tài)創(chuàng)建link標(biāo)簽，把相關(guān)字體css文件引進(jìn)來

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

如果事先沒有css文件，可以動態(tài)創(chuàng)建style標(biāo)簽，再插到head中

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

原文鏈接：S動態(tài)引入js,CSS——動態(tài)創(chuàng)建script/link/style標(biāo)簽

2017年7月31日 12:16