Bootstrap 轮播会影响更改幻灯片上的所有字体

Question

我在我的网站上使用 Bootstrap Carousel。我发现很小但很烦人的问题。每次如果轮播改变幻灯片，网络上的所有字体都会有一秒钟变粗。每一张新幻灯片都会重复这一过程。

我在不止一个网站上遇到过这个问题。你见过吗？有什么解决办法吗？

Answer 1

闪烁的原因是Webkit引擎的GPU加速。动画改变了浏览器的字体呈现模式。您可以尝试使用此 CSS 样式来解决此问题：

-webkit-font-smoothing: subpixel-antialiased

此外，z-index 属性可能还需要一些黑客攻击，我读到动画文本应该在页面上具有最高的 z 值 - 虽然你不应该关心这个，如果字体平滑解决了它。

Answer 2

我尝试从 CSS 的主体样式中删除它：

text-rendering: geometricPrecision;

这对我有用。

Answer 3

在 style.css 中创建 class 不继承他人。例如。

body{ font-family:"Arial"; }

p{ font-family:"Arial"; }

这对我有用。

另一种方法是“尝试另一种字体”代替您使用的字体。

Answer 4

我在 Whosebug 上找到的所有资源仍然对字体和图像留下模糊的副作用。所以我的解决方案是使用没有 class "slide" 的 Bootstrap Carousel 作为 class="carousel" 只有 - 因此不会有幻灯片过渡，图像会完全从一个变成另一个，但在我看来更好而不是影响整个网站。

更改自：

<div id="carousel" class="carousel slide" data-ride="carousel">

收件人：

<div id="carousel" class="carousel" data-ride="carousel">

Bootstrap 轮播会影响更改幻灯片上的所有字体

Bootstrap Carousel affects all fonts on change slide

html

css

fonts

twitter-bootstrap