css - 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">

除了“跳动”听起来好像您没有为图标设置固定宽度，所以如果您这样做，无论如何都应该解决跳动问题。