1

我正在使用一个名为 Flexslider 的 JS 滑块，并发现了一个奇怪的文本渲染问题。当图像切换到下一个时，Google Chrome (Windows/OSX) 似乎会更改网页上所有文本元素的字体粗细。在 FF/IE 中不会出现此问题。

你知道为什么会这样吗？我试过使用不同的字体但没有成功。请查看我的示例屏幕截图以查看差异。

正常图像

滑动时

4

5 回答 5

3

这绝对是因为滑块脚本使用了硬件加速的 css 转换。众所周知，当应用于 webkit 时会改变抗锯齿技术，甚至是不相关的元素。这是一个证明它的演示：http: //jsfiddle.net/378pN/

你真的无能为力。如果您想继续使用 css 转换，则需要更改浏览器抗锯齿文本的方式。您可以通过添加以下内容强制它使用更瘦的版本（我认为这是“正常”抗锯齿，而不是子像素）：

html{-webkit-font-smoothing: antialiased;}

演示：http: //jsfiddle.net/378pN/1/

这样，在添加 CSS 转换时，它不会改变呈现文本的方式。

于 2012-11-25T22:44:44.390 回答
1

你能发布你的代码吗？它很可能是一个未封闭的标签。也可能是滑块和不断变化的图像正在改变元素的高度，并且影响了它下面的文本，因为它们只是移动了一点点。

于 2012-11-19T22:28:53.790 回答
1

这个问题有一个简单的解决方案。例如，您有一个image-slider，它改变了文本渲染，只需将下面的 CSS 代码用于Slider-Div。

position: relative; 
z-index: 1;

就这样 ：）

于 2014-04-03T11:43:29.143 回答
0

不看代码，很难说。我的猜测是没有正确关闭的标签。您应该通过W3 验证器运行您的页面并更正您发现的任何错误。如果它仍然存在，您需要提供更多信息。

于 2012-11-19T20:06:16.207 回答
0

我必须同意其他答案，添加一些代码会很有用，否则，如果 flex 滑块使用 css3 转换，您可以尝试 -webkit-transform: translateZ(0); 在更改别名的文本元素上，这帮助我解决了我在使用另一个名为 Fotorama.js 的 js 滑块插件时遇到的类似问题

于 2012-11-21T14:26:45.380 回答