html5适合安卓的字体,在安卓中切换h5页面中的字体

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

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

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

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

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

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

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

经过指点，解决过程如下：

1.字体切换要考虑到原先的样式是否存在-->如果存在则删除style标签重新添加新的标签

2.字体切换要考虑到原先的样式是否存在-->如果存在则删除style标签内所有样式重新添加新的样式

方法1中 与 方法2在时间上差不多，但是涉及到删除节点，保险起见，我还是选择2了。

首次切换字体存在5ms-10ms的白板画面，具体原因不知道... 麻烦知道原因的大神，不吝赐教！

附上demo代码：

Demo

我爱中华人民共和国啊！！！

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

// }

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