Safari页面上使用jQuery滑块渲染页面字体更薄 [英] Safari rendering page fonts thinner with jQuery slider on page
问题描述
< html>
< head>
< link href =css / style.css =stylesheettype =text / css/>
< link rel =stylesheethref =css / flexslider.css/>
< title>标题< / title>
< script src =http://code.jquery.com/jquery-latest.js>< / script>
< script src =js / flexslide.js>< / script>
< / head>
< body>
< div id =header>< span class =slogan> Slogan At The Top< / span>< / div>
< h1>查看这些幻灯片< / h1>
< div class =gallery>
< div class =flexslider-container>
< div class =flexslider>
< ul class =slides>
< li>< div class =slider>元素1< / div>< / li>
< li>< div class =slider>元素2< / div>< / li>
< / ul>
< / div>
< / div>
< / div>
< / body>
< / html>
我实际上假设这种情况下的代码不会帮助。我觉得Safari和FlexSlider更像是一个问题。我认为我已经把问题缩小到了FlexSlider对translate3d的使用，但并没有出现。
有没有其他人经历Safari改变基于jQuery元素的字体厚度或者甚至像Flash视频（在这种情况下不使用）？此外，我没有使用任何嵌入字体，fyi。
分享这个，因为它解决了我的问题...我简单地添加了以下内容到我的CSS文件中：
$ $ p $ html $ -webkit-font-smoothing：antialiased; }
这是一个反向修复，因为它会改变页面上的其他文字就像它在滑块中一样。做相反的事情需要你修改flexslider javascript代码。
从这里得到这个： https://github.com/desandro/isotope/issues/209#issuecomment-7377938
I'm pulling my hair out on this one. I'm using the FlexSlider on a page with great results; however when running this, Safari (Mac version, not ios) renders the fonts on the page thinner. Firefox and Chrome both have no issues. Here is my basic code in case that helps at all:
<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/flexslider.css" />
<title>Title</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/flexslide.js"></script>
</head>
<body>
<div id="header"><span class="slogan">Slogan At The Top</span></div>
<h1>View These Slides</h1>
<div class="gallery">
<div class="flexslider-container">
<div class="flexslider">
<ul class="slides">
<li><div class="slider">Element 1</div></li>
<li><div class="slider">Element 2</div></li>
</ul>
</div>
</div>
</div>
</body>
</html>
I actually assume that the code in this case won't help. I feel like it's more of an issue with Safari and something in FlexSlider. I thought I had narrowed the problem down to FlexSlider's use of translate3d but it didn't pan out.
Has anyone else experienced Safari changing the thickness of fonts based on jQuery elements or even something like a flash video (not used in this case)? Also, I'm not using any embedded fonts, fyi.
Sharing this as it solved the issue for me... I simply added the following into my CSS file
html { -webkit-font-smoothing: antialiased; }
This is an inverse fix, in that it changes the rest of the text on your page to appear as it does in the slider. Doing it the other way round will require you modifying the flexslider javascript code.
Got this from here: https://github.com/desandro/isotope/issues/209#issuecomment-7377938
这篇关于Safari页面上使用jQuery滑块渲染页面字体更薄的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
