javascript - 在 android 中通过 javaScript 更改 webView 字体系列

Question

我正在开发一个 Epub 阅读器 应用程序。 我需要在我的应用程序中添加更改字体工具。 我的 JavaScript 方面有问题。

我的应用打开不同的 Epub 文件，因此我无法预测 Epub HTML、CSS 文件内容。

我的函数适用于没有 font-family 属性的元素，它不会影响可能具有 font-family 属性的元素，例如 p 、body 和 h 标签。

changeFont function :

    function changeFont(fontIndex) {
    
        var fontFamilyValues = ["aldhabi.ttf", "b_nazanin.TTF", "b_nazanin_outline.ttf", "iransanse_mobile.ttf"];
        var newStyle = document.createElement('style');
    
        var font=fontFamilyValues[fontIndex];
        var fontUrl="file:///android_asset/fonts/"+font;
        var fontName=font.substring(0,font.lastIndexOf('.'));
        newStyle.appendChild(document
          .createTextNode("@font-face{ font-family:"+fontName+";src: url("+fontUrl+");}"));
    
        document.head.appendChild(newStyle);
    
        newStyle.appendChild(document.createTextNode("*{font-family:"+fontName+";}"));
    
    }

Answer 1

内联样式覆盖 <style> block (样式 block 覆盖外部 css 文件)。所以你必须先删除内联样式:

$("*").css('font-family', '');

或者使用纯javascript:

 var all = document.getElementsByTagName("*");
 for (var i=0; i < all.length; i++) 
 {    
     all[i].style.removeProperty('font-family');
 }

为了让你的新风格凌驾于其他一切之上，你也可以像这样在你的风格上应用 !important :

newStyle.appendChild(document.createTextNode("*{font-family:"+fontName+" !important;}"));