Chrome文字Flickr使用Css旋转。 ＆＃39;背面能见度＆＃39;使事情变得更糟

Question

首先，这里是小提琴：http://jsfiddle.net/krish7878/wytv7n7n/3/

我正在使用CSS在悬停时旋转图标。我尝试使用＆＃39; webkit-backface-visibility：hidden＆＃39;和＆＃39; -webkit-font-smoothing：antialiased;＆＃39;。他们只是让文字厚实而丑陋。

以下是代码：

<div class="container">
        <div class="row">
            <div class="blog-item col-lg-4 col-md-4 col-sm-4">
                <div class="image">
                    <img src="http://3.bp.blogspot.com/-E3B9ce7Ck20/UFBfFrkbV8I/AAAAAAAADX8/fFMHEyZcZDg/s400/Animated-Wallpapers.jpg">
                    <div class="overlay">
                        <a href="#">
                            <i class="fa fa-plus"></i>
                        </a>
                    </div><!-- /.overlay -->
                    </div><!-- /.image -->
                    <h3>Welcome to A Safer World</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur </p>
            </div><!-- /.blog-item -->
        </div><!-- /.row -->
    </div><!-- /.container -->

CSS：

.blog-item{
overflow: hidden;
}
.image{
position: relative;
overflow: hidden;
}
.image .overlay{
position: absolute;
width: 100%;
height: 100%;
background-color: #49c8ff;
top: 0px;
opacity: 0;

transition:         all 400ms ease-in-out;
-moz-transition:    all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-o-transition:      all 400ms ease-in-out;
-ms-transition:     all 400ms ease-in-out;
}
.blog-item:hover .overlay{
opacity: 1;
}
.blog-item h3,
.blog-item p{
font-family: "Source Sans Pro";
font-weight: "400";   
 }
.overlay a{
width: 35px;
height: 35px;
border: 1px solid #fff;
position: absolute;
display: block;
margin: 0 auto;
left: 0px;
right: 0px;
border-radius: 100%;
top:30%;
text-align: center;

transition:         all 400ms ease-in-out;
-moz-transition:    all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-o-transition:      all 400ms ease-in-out;
-ms-transition:     all 400ms ease-in-out;
}
.image:hover a{
top: 40%;

-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.overlay a:hover{
background-color: #297595;
border: 1px solid #297595;
}
.overlay a i{
color: #fff;
position: relative;
top: 7px;
}

Answer 1

嗯，chrome会使用版本37的DirectWrite，直到那时，大多数WD都知道它不能正确渲染字体。

在此讨论：Chromium issue

另一个SO问题详细解答：SO link

---

尝试更改已解决的字体系列，方法是将其更改为 sans-sarif 或 尝试其他字体！

FlickerRemoved

.blog-item h3, .blog-item p {
    font-family:sans-serif;
    font-weight: 400";

}