Question

好的，所以我的网站滑块（使用猫头鹰旋转木马）导致我网站上的文字添加/减去重量。当它转换时，文本看起来很薄，当它完成转换（坐在单个图像上）时，它会恢复正确的粗体。

我的HTML如下：

<div id="lead-slider" class="owl-carousel oc-lead">
 <div class="lead-slide"></div>
 <div class="slide2"></div>
 <div class="slide3"></div>
 <div class="slide4"></div>
 <div class="slide5"></div>
 <div class="slide6"></div>
 <div class="slide7"></div>
 <div class="slide8"></div>
</div><!-- END OWL CAROUSEL -->

现在，这些幻灯片必须设置为窗口或视口的高度，因此这里是与之相关的关联Javascript函数：

$("#lead-slider").height($(window).height() ) ;

$(window).resize(function(){
$("#lead-slider").height($(window).height() );

$(".lead-slide").height($(window).height() ) ;

$(window).resize(function(){
$(".lead-slide").height($(window).height() );

});

$(".slide2").height($(window).height() ) ;

$(window).resize(function(){
$(".slide2").height($(window).height() );

});

$(".slide3").height($(window).height() ) ;

$(window).resize(function(){
$(".slide3").height($(window).height() );

});

$(".slide4").height($(window).height() ) ;

$(window).resize(function(){
$(".slide4").height($(window).height() );

});

$(".slide5").height($(window).height() ) ;

$(window).resize(function(){
$(".slide5").height($(window).height() );

});

$(".slide6").height($(window).height() ) ;

$(window).resize(function(){
$(".slide6").height($(window).height() );

});

$(".slide7").height($(window).height() ) ;

$(window).resize(function(){
$(".slide7").height($(window).height() );

});

$(".slide8").height($(window).height() ) ;

$(window).resize(function(){
$(".slide8").height($(window).height() );

});

用于初始化滑块的JS如下：

$("#lead-slider").owlCarousel({

  autoPlay: 3000,

  navigation : false, // Show next and prev buttons
  slideSpeed : 500,
  paginationSpeed : 400,
  singleItem:true,
  autoHeight : false

  });

重要说明：这些图像实际上是div的背景元素（.lead-slide，.slide2等），如下所示：

.lead-slide {
background-image: url('../img/what-slide.jpg');
background-position: center bottom;
background-size: cover;
}

所以我尝试弄乱Owl Carousel JS选项无济于事。我试过改变CSS背景大小。我的猜测是window.height可能是责备在这里，但不知道为什么。似乎无论我尝试什么，文本似乎都在网站上加粗或不加盖。最后一件事，链接到正在发生的事情的演示：

https://www.youtube.com/watch?v=kpHMTvJiJhY&feature=youtu.be

任何想法，伙计们？非常感谢。

Answer 1

我认为这是一个webkit呈现问题。尝试将以下css代码添加到页面主体。

CSS：

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

使用滑块过渡复制粗体和非粗体

1 个答案: