Glyphicon 加载时间导致抖动

Question

我正在尝试修复我的字形。每当加载页面时，它们都会移动并在很短的时间后出现，但我的导航因此而摇晃。

有人对此有解决办法或经验吗？

下面是我如何加载字体的代码：

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url(../fonts/glyphicons-halflings-regular.eot);
    src: url(../fonts/glyphicons-halflings-regular.eot?#iefix) format("embedded-opentype"), url(../fonts/glyphicons-halflings-regular.woff2) format("woff2"), url(../fonts/glyphicons-halflings-regular.woff) format("woff"), url(../fonts/glyphicons-halflings-regular.ttf) format("truetype"), url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format("svg")
}

Answer 1

如果这是加载图标的问题，我建议尝试通过 bootstrap CDN 加载它们，看看是否有任何不同：

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

除此之外"jumping"听起来你没有为图标设置固定宽度，所以如果你这样做，无论如何都应该解决跳跃问题。

Glyphicon 加载时间导致抖动

Glyhpicon loading time causes shaking

css

twitter-bootstrap

glyphicons