javascript - 复制带有滑块过渡的粗体和粗体

好的，所以我的网站滑块（正在使用Owl Carousel）导致我网站上的文字增加/减少了重量。过渡时，文本显得较细，过渡完成后（坐在单个图像上），将恢复为正确的粗体。

我的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

大家有什么想法吗？非常感激。

最佳答案

我相信这是一个webkit渲染问题。
尝试将以下CSS代码添加到页面正文中。

CSS：

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

关于javascript - 复制带有滑块过渡的粗体和粗体，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24434000/