javascript - 将 Ajax 内容加载到 div 时未预先加载字体 (Wordpress)

Question

我在带有 Ajax 的 Wordpress 中使用 JS 函数，当单击某些元素时，它会在模态 div 中加载帖子的内容。 JS 函数如下所示:

function openProjectModal($that) {

    var post_id = $that.attr("rel");
    window.location.hash = $that.data("slug");
    $("#content-projects").load(localization.ajax_url+"?action=load_more_post&pid="+post_id,{},function(data,status){
        initImageLoad();
    });
    }

在 functions.php 中创建标记的函数如下所示:

function load_more_post_callback() {
    if( isset($_GET["pid"]) ){
        $post = get_post( $_GET["pid"] );
        if( $post instanceof WP_Post ) {
            echo '<div id="close"></div>';
            echo '<section id="title-projects"><h1>' . get_the_title($post->ID) . '</h1><p class="project-meta">' . get_field("location", $post->ID) . ' (' . get_field("year", $post->ID) . ')</p></section>';
        } else {
            // nothing found with the post id
        }
    } else {
        // no post id
    }
    wp_die();
}

新内容中的 h1 通过 CSS 应用了初始页面上未使用的字体。因此，当 div 从 Ajax 调用中加载内容时，字体加载会出现延迟，这看起来很奇怪。它从空白到 Times New Roman，再到正确的字体。当我关闭模态并打开一个新模态时，字体会立即按应有的方式加载。我猜它从第一次加载时就被缓存了。

我已经在 CSS 中添加了整个网站正在使用的字体，但浏览器似乎只加载了标记中实际使用的字体，因为这种字体对于 Ajax 内容来说是独一无二的在加载 Ajax 内容时加载。

虽然我只在 Safari 中注意到这一点，但如果有解决方法就更好了，即使这只是 Safari 中的一个特殊问题。关于如何在显示之前预加载字体有什么想法吗？

Answer 1

在你的模式中简单地做

<h2 class="myTitleFont">Title</h2>

然后在 css 中你可以做:

.myTitleFont {
   font-family. "yourFont";
}

或者如果你真的必须:

.myTitleFont {
   font-family: "yourFont" !important;
}

显然“yourFont”是您的字体的名称。