Css jQuery UI可排序：在Mozilla 40.0.3中使用@font-face在开始/停止时闪烁未设置样式的文本

我使用jQuery UI Sortable创建了一个小的拖放。下面的.gif演示了该问题。您无法在.gif中看到它，但页面上的所有文本（而不仅仅是可排序的文本）都会闪现未设置样式的默认字体文本。]

经过数小时的实验，我发现将以下CSS属性更改为使用浏览器默认字体或其他本地字体可以解决此问题：

body {
    font-family: "Lato", "sans-serif";
}

Lato正在通过我的HTML文档头部的以下行加载：

<link href="http://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" />

下面是您看到的jQuery UI排序表的Javascript代码和标记。它连接到另一个可排序表，以允许在列表之间拖动项目：

$('.js-sortable').each(function () {
    var $this = $(this);
    var connectedTo = $this.attr('data-connected-to');

    $this.sortable({
        connectWith: connectedTo,
        cursor: 'move',
        items: '.js-sortable-item:not(.js-locked)',
        placeholder: 'sf-sortable-placeholder',
        tolerance: 'pointer'
    });
});

// when a sortable item is dropped
$('.js-sortable').on('sortdeactivate', function(event, ui) {
    var $this = $(this);

    // for the active rules list
    if ($this.attr('id') === 'active-rules') {

        // recalculate and display the new priority of all list items
        var count = 1;
        $this.find('.js-sortable-item').each(function() {
            var $this = $(this);

            $this.attr('data-priority', count);
            $this.find('.js-status').text('Priority ' + count);
            count++;
        });

    // for the inactive rules list
    } else if ($this.attr('id') === 'inactive-rules') {

        // remove priority and display no priority indicator
        $this.find('.js-sortable-item').removeAttr('data-priority');
        $this.find('.js-status').text('Not Enforced');
    }
});

// initialize
$('.js-sortable').trigger('sortdeactivate');

<h2 class="sf-rules-head">Active Rules</h2>
<ul id="active-rules" class="js-sortable sf-sortable" data-connected-to="#inactive-rules">
    <li class="js-sortable-item js-locked sf-rule" data-priority="1">
        <div class="sf-handle-container">
            <i class="sf-handle"></i>
            <p class="js-status sf-status"></p>
            <p class="sf-rule-name">Rule Name A <i class="fa fa-info-circle js-tooltip" data-content="RULE_DESCRIPTION_GOES_HERE"></i></p>
        </div>
    </li>
    <li class="js-sortable-item sf-rule" data-priority="2">
        <div class="sf-handle-container">
            <i class="sf-handle"></i>
            <p class="js-status sf-status"></p>
            <p class="sf-rule-name">Rule Name B <i class="fa fa-info-circle js-tooltip" data-content="RULE_DESCRIPTION_GOES_HERE"></i></p>
        </div>
    </li>
    <li class="js-sortable-item sf-rule" data-priority="3">
        <div class="sf-handle-container">
            <i class="sf-handle"></i>
            <p class="js-status sf-status"></p>
            <p class="sf-rule-name">Rule Name C <i class="fa fa-info-circle js-tooltip" data-content="RULE_DESCRIPTION_GOES_HERE"></i></p>
            <select class="form-control sf-dropdown">
                <option value="one" selected>Option One</option>
                <option value="two">Option Two</option>
                <option value="three">Option Three</option>
                <option value="four">Option Four</option>
            </select>
        </div>
    </li>
</ul>

$（'.js sortable'）。每个（函数（）{
var$this=$（this）；
var connectedTo=$this.attr（'data-connected-to'）；
$this.sortable({
连接到，
光标：“移动”，
项：'.js可排序项：未（.js锁定）'，
占位符：“sf可排序占位符”，
公差：“指针”
});
});
//删除可排序项时
$（'.js sortable'）。on（'sortdeactivate'，函数（事件，ui）{
var$this=$（this）；
//用于“活动规则”列表
if（$this.attr（'id'）='activerules'）{
//重新计算并显示所有列表项的新优先级
var计数=1；
$this.find（'.js可排序项'）。每个（函数（）{
var$this=$（this）；
$this.attr（'data-priority'，count）；
$this.find（'.js status'）.text（'Priority'+count）；
计数++；
});
//用于“非活动规则”列表
}else if（$this.attr（'id'）='inactive rules'）{
//删除优先级并显示无优先级指示灯
$this.find（'.js可排序项'）.removeAttr（'data-priority'）；
$this.find（'.js status'）.text（'未强制'）；
}
});
//初始化
$（'.js sortable'）.trigger（'sortdeactivate'）；
现行规则



规则名称A



规则名称B



规则名称C
选择一
选择二
选择三
选择四

---

我无法在Chrome和IE中重现这个问题。有人能告诉我为什么会发生这种情况吗？没有办法在Mozilla中将@font-face与jQuery UI Sortable一起使用并避免这种奇怪的文本样式闪现吗？

我能够重现这个问题，但只有在清除缓存时（例如，通过

Ctrl+F5

）。如果我刷新页面而不清除缓存，问题就会消失。因此，我倾向于认为这与缓存的字体有关。

$('.js-sortable').each(function () {
    var $this = $(this);
    var connectedTo = $this.attr('data-connected-to');

    $this.sortable({
        connectWith: connectedTo,
        cursor: 'move',
        items: '.js-sortable-item:not(.js-locked)',
        placeholder: 'sf-sortable-placeholder',
        tolerance: 'pointer'
    });
});

// when a sortable item is dropped
$('.js-sortable').on('sortdeactivate', function(event, ui) {
    var $this = $(this);

    // for the active rules list
    if ($this.attr('id') === 'active-rules') {

        // recalculate and display the new priority of all list items
        var count = 1;
        $this.find('.js-sortable-item').each(function() {
            var $this = $(this);

            $this.attr('data-priority', count);
            $this.find('.js-status').text('Priority ' + count);
            count++;
        });

    // for the inactive rules list
    } else if ($this.attr('id') === 'inactive-rules') {

        // remove priority and display no priority indicator
        $this.find('.js-sortable-item').removeAttr('data-priority');
        $this.find('.js-status').text('Not Enforced');
    }
});

// initialize
$('.js-sortable').trigger('sortdeactivate');

<h2 class="sf-rules-head">Active Rules</h2>
<ul id="active-rules" class="js-sortable sf-sortable" data-connected-to="#inactive-rules">
    <li class="js-sortable-item js-locked sf-rule" data-priority="1">
        <div class="sf-handle-container">
            <i class="sf-handle"></i>
            <p class="js-status sf-status"></p>
            <p class="sf-rule-name">Rule Name A <i class="fa fa-info-circle js-tooltip" data-content="RULE_DESCRIPTION_GOES_HERE"></i></p>
        </div>
    </li>
    <li class="js-sortable-item sf-rule" data-priority="2">
        <div class="sf-handle-container">
            <i class="sf-handle"></i>
            <p class="js-status sf-status"></p>
            <p class="sf-rule-name">Rule Name B <i class="fa fa-info-circle js-tooltip" data-content="RULE_DESCRIPTION_GOES_HERE"></i></p>
        </div>
    </li>
    <li class="js-sortable-item sf-rule" data-priority="3">
        <div class="sf-handle-container">
            <i class="sf-handle"></i>
            <p class="js-status sf-status"></p>
            <p class="sf-rule-name">Rule Name C <i class="fa fa-info-circle js-tooltip" data-content="RULE_DESCRIPTION_GOES_HERE"></i></p>
            <select class="form-control sf-dropdown">
                <option value="one" selected>Option One</option>
                <option value="two">Option Two</option>
                <option value="three">Option Three</option>
                <option value="four">Option Four</option>
            </select>
        </div>
    </li>
</ul>