jQuery UI Sortable:在Mozilla 40.0.3中使用@ font-face在开始/停止时闪烁未样式化的文本

最后发布: 2015-09-16 16:58:39


问题

我使用jQuery UI Sortable创建了一个小的拖放操作。 该问题在下面的.gif中得到了演示。 您无法在.gif中看到它,但是页面上所有文本(不仅是可排序文本内)都闪烁有未样式化的默认字体文本。 开始或停止拖动时闪烁无样式的文本 ] 1

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

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

在我的HTML文档的开头,这行加载了Lato:

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

会从Google加载此样式表:

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(http://fonts.gstatic.com/s/lato/v11/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(http://fonts.gstatic.com/s/lato/v11/H2DMvhDLycM56KNuAtbJYA.woff2) format('woff2');
}

这是您看到的jQuery UI Sortable的Javascript代码和标记。 它连接到另一个Sortable,以允许在列表之间拖动项目:

$('.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>

我无法在Chrome和IE中重现此问题。 谁能告诉我为什么会这样? 有没有办法在Mozilla中将@ font-face与jQuery UI Sortable一起使用,并避免这种奇怪的文本样式闪烁?

css jquery-ui font-face fouc