<Div style=>不改变字体

Question

我正在使用以下脚本加载外部html文件：

   <script type="text/javascript">
        $(document).ready(function(){
           $("#page1").click(function(){
            $('#result').load('140314F00604.htm');
             //alert("Thanks for visiting!");
           });

           $("#page2").click(function(){
            $('#result').load('140314F029.htm');
             //alert("Thanks for visiting!");
           });

           $("#page3").click(function(){
            $('#result').load('140221F193.htm');
             //alert("Thanks for visiting!");
           });
         });
    </script>
      <table cellpadding="0" cellspacing="0" style="width: 100%; border-size: 1px">
        <tr>
          <td><a id="page1" href="#">About</a></td>
          <td><a id="page2" href="#">Community</a></td>
          <td><a id="page3" href="#">Sponsor</a></td>
        </tr>
      </table>

    <div id="result" style="color:red; font-style:italic; font-family:Arial; font-size:12px;"></div>

它运作完美。 加载html文件，更改字体颜色，斜体和大小，但似乎不希望将字体本身更改为Arial。

导入的HTML如下所示：

导入的html是由软件生成的，因此无法在程序本身中进行编辑，因此我正在尝试加载它并更改其格式。

下面的脚本运行完美。 不幸的是，导入的html使用空格来替换文本。 显然这是无法改变的。 如果将字体从courier更改为其他任何字体（如图像上所示），则工作脚本会弄乱间距。 可以解决这个问题吗？

function applyPreFont(){
var oldHtml = $('#result pre').html();
$('#result pre').html('<div class="pre-div">' + oldHtml + '</div>');
}

function LoadExternalContent(pagename){
$('#result').load(pagename, function(data) {
    applyPreFont();
    // do other stuff
});
}

$(document).ready(function(){
$("#page1").click(function(){
    LoadExternalContent('140314F00604.htm');
});

$("#page2").click(function(){
    LoadExternalContent('140314F029.htm');
});

$("#page3").click(function(){
    LoadExternalContent('140221F193.htm');
});
});

原始HTML文件

脚本的输出

Answer 1

jQuery中的$ .load方法还有另一个重载，它传递了回调函数。 在文档中，“如果提供了“完成”回调，则在执行后处理和HTML插入之后执行该回调。”

我相信您应该将加载方法更改为：

$('#result').load('140221F193.htm', function(){
   //alert("Thanks for visiting!");
   //set css here
});

Answer 2

pre不能很好地接受CSS字体样式。 fonts属性将被绕过， 甚至继承自父元素。 甚至尝试将其应用于父元素都行不通。

更新1
警告：
pre元素使用monospace字体（所有字形具有相同的固定宽度），这对于表格数据来说很容易。 大多数字体（如Arial，Helvetica，Verdana，Times New Roman ..）不是等宽字体，因此，每个字形根据其宽度都有自己的大小。 最后，如果应用非等宽字体，则表格数据将不再是“表格”。 有关MDN文档的更多信息 。

您必须将css应用于pre的后代元素。

当您使用jQuery（并且html是动态的）时，您可以使用jQuery将pre内容包装到新的div ，并将CSS应用于其新元素：

var oldHtml = $('#result pre').html();
$('#result pre').html('<div class="pre-div">' + oldHtml + '</div>');

结果是这样的：

<pre>
    <div class="pre-div">
        Boland Athletics ...
        ...
    </div>
</pre>

我建议您这样编写代码：

function applyPreFont(){
    var oldHtml = $('#result pre').html();
    $('#result pre').html('<div class="pre-div">' + oldHtml + '</div>');
}

function LoadExternalContent(pagename){
    $('#result').load(pagename, function(data) {
        applyPreFont();
        // do other stuff
    });
}

$(document).ready(function(){
    $("#page1").click(function(){
        LoadExternalContent('140314F00604.htm');
    });

    $("#page2").click(function(){
        LoadExternalContent('140314F029.htm');
    });

    $("#page3").click(function(){
        LoadExternalContent('140221F193.htm');
    });
});

CSS：

.pre-div {
    font-family: arial;
    font-weight: bold;
}

查看小提琴中的示例

**仅在Chrome中测试。

Answer 3

更新：

如果您希望所有内容对齐（因为PRE使用Mono Mono字体），请尝试下载Arial的Monospace版本（ 在此处下载 ，请确保单击字体右侧的实际下载内容）

根据您接受的答案而不是通过CSS删除pre标签的实现方式是：

@font-face
{
font-family: arialMono;
src: url(/directory/locationOfFontFile.ttf);
}

.pre-div{
font-family: arialMono;
}

通过您的Jquery函数（在将字体添加到样式表之后），可以像这样实现：

 function applyPreFont(){
    var oldHtml = $('#result pre').html();
    $('#result pre').html("")
    $("<div />",{
    "class": "pre-div",
    html: oldHtml,
    css: {
    "font-family": "arialMono"
    }
    }).appendTo($('#result pre'));
    $('#result pre').html('<div class="pre-div">' + oldHtml + '</div>');

    }

---

问题出在<pre>标记（ Preformatted Text ）上。 由于标签的性质，样式将是错误的。 最好的选择是通过jquery删除Pre标签：

$('#result').load('140221F193.htm', function(){
   $("#result pre").contents().unwrap()
});

那应该删除PRE标签并成功呈现html :)

JSFidde这里