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中创建类，而不是从另一个继承。例如。

体{       FONT-FAMILY： “宋体”; }

p {font-family：“Arial”; }

这项工作适合我。

另一种方法是“尝试另一种字体”你使用过的字体。

Answer 4

All the resources I found on stackoverflow still leave a blurriness as a side-effect on fonts and images. So my solution was to use the Bootstrap Carousel without the class "slide" as class="carousel" only - thus there won't be slide transition, the image will change completely from on to another, but on my point of view is better instead of affecting the entire website.

Change From:

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

To:

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

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

4 个答案: