Question

我通过AJAX使用jQuery嵌入样式表来替换当前的font-family并使用其他字体类型进行一些测试。那是我的代码：

<script type="text/javascript">
$(function(){
    var page = $('#page').html();
    $.ajax({
        url: '/css/style.css',
        success: function(data){
            data = data.replace(/Arial/g, 'Verdana');

            $('#styles').html(data);

        },
        async: false
    })
});
</script>
<style type="text/css" id="styles"></style>

问题是，font-family未正确应用。但是一旦我打开开发工具，样式就会得到应用。我想需要对页面进行完整的重新绘制。如何在不重新加载页面的情况下实现这一目标？

由于这仅用于测试，因此我不关心FOUC或性能问题。

修改

我忽略了代码中的typekit导入：

<script type="text/javascript" src="//use.typekit.net/****.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

这似乎是一个问题。我认为在发出AJAX请求时，字体（我在typekit中包括“Europa”）还没有准备好。有任何建议如何解决？

Answer 1

加载脚本后，您应该尝试调用ajax。更容易解决的问题是：

$(window).on('load', function(){
    var page = $('#page').html();
    $.ajax({
        url: '/css/style.css',
        success: function(data){
            data = data.replace(/Arial/g, 'Verdana');

            $('#styles').html(data);

        },
        async: false
    })
});

顺便说一句，我看不出你为什么要设置async false的原因，你应该删除它。

Answer 2

stackoverflow上有一个非常相似的问题。 CSS: Auto update font size

也许这适合你？它反映了有关强制调整大小事件的注释中的内容。

这是链接的小提琴： http://jsfiddle.net/danield770/rWYjk/

 causeRepaintsOn = $("h1, h2, h3, p");

 $(window).resize(function() {
    causeRepaintsOn.css("z-index", 1);
 });

插入样式后jQuery强制重绘

2 个答案: