Question

我在Apress的Wordpress中使用JS函数，当单击某些元素时，该函数会在模式div中加载帖子的内容。 JS函数如下所示：

return highScoreWord

在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(); }具有通过初始页面未使用的CSS施加的字体。因此，当div从Ajax调用中加载内容时，字体的加载会有所延迟，这看起来很奇怪。从空白到Times New Roman，再到正确的字体。当我关闭模态并打开一个新模态时，字体即会立即加载。我想它是在第一次加载时被缓存的。

我已经在整个站点上使用的CSS中添加了字体，但是似乎浏览器只加载了标记中实际使用的字体，因为这种字体对于Ajax内容是唯一的在加载Ajax内容时被加载。

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

Answer 1

只需在模态中完成

Enter the path of the files: /Users/nataliaresende/Dropbox/XXX
File1Content File2Content File3Content ... File35Content

然后在<h2 class="myTitleFont">Title</h2>中可以执行以下操作：

css

或者如果真的需要：

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

很显然，“ yourFont ”是您的.myTitleFont { font-family: "yourFont" !important; }的名称。

Answer 2

我仍然相信这只是一个CSS问题，但是，请在您的模式打开并运行时为其创建回调：

$(".modal").on.("show", function(){
   addGoogleFont();
});

function addGoogleFont() {
    $("head").append("<link href='https://fonts.googleapis.com/css?family=" + FontName + "' rel='stylesheet' type='text/css'>");
    $(".modal h2").css("opacity", "1");
}

并将模态h2设置为不透明度0，直到您看到它为止

.modal h2 {
   opacity: 0;
}

将Ajax内容加载到div（Wordpress）中时不会预先加载字体

2 个答案: