极客观点
项目管理
HarmonyOS
在开发过程中，有这么一个需求，无线传输设备给安卓传送一串字符，安卓接受并转发给前端页面。
字段形如：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无法进行操作，所以导致问题的出现。非常感谢大神的解析，另外首次创建标签时，需要花费较长时间，而再次创建标签时则不需要花费较长时间，不知道原因是什么，麻烦知道的大神赐教~~~
android
html5
如果事先写好css文件，可以动态创建link标签，把相关字体css文件引进来
如果事先没有css文件，可以动态创建style标签，再插到head中
原文链接：S动态引入js,CSS——动态创建script/link/style标签