在安卓中切换h5页面中的字体

路飞的红帽子
  • 25

在开发过程中,有这么一个需求,无线传输设备给安卓传送一串字符,安卓接受并转发给前端页面。

字段形如:font-family:'黑体'

前端要根据传输过来的字符进行变更页面的字体,问题悄无声息的出现了......

在windows系统中,可以直接调用'黑体'字体库。在安卓中却行不通,在经过测试以后发现,可以通过@font-face自定义

字体,指定安卓系统字体文件后,就可以调用字体库。

但是,如何进行动态的切换font-face中的src路径呢? 以保证可以正常的在安卓系统中 切换h5页面的字体。

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


经过指点,解决过程如下:
1.字体切换要考虑到原先的样式是否存在-->如果存在则删除style标签重新添加新的标签
2.字体切换要考虑到原先的样式是否存在-->如果存在则删除style标签内所有样式重新添加新的样式

方法1中 与 方法2在时间上差不多,但是涉及到删除节点,保险起见,我还是选择2了。
首次切换字体存在5ms-10ms的白板画面,具体原因不知道... 麻烦知道原因的大神,不吝赐教!

附上demo代码:

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

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

<body>
    <section>
        <p>我爱中华人民共和国啊!!!</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>

总结: 由于基础薄弱,认为style无法进行操作,所以导致问题的出现。非常感谢大神的解析,另外首次创建标签时,需要花费较长时间,而再次创建标签时则不需要花费较长时间,不知道原因是什么,麻烦知道的大神赐教~~~

回复
阅读 2.6k
1 个回答
止醉
  • 770
✓ 已被采纳

如果事先写好css文件,可以动态创建link标签,把相关字体css文件引进来

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文件,可以动态创建style标签,再插到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动态引入js,CSS——动态创建script/link/style标签

宣传栏