css转换上的字体干扰

Posted 2023-03-06

【中文标题】css转换上的字体干扰

【英文标题】：Font disturbtion on css transition

【发布时间】：2015-08-04 15:48:26

【问题描述】：

我使用 CSS3 过渡在产品上实现悬停效果，标签从底部出现在产品图像上：

标签上来的时候，上来0.5秒左右，字体不是平滑清晰的，但是过渡结束后0.5~1秒左右，就变得清晰流畅了。 Firefox 会出现此问题。 使用 Chrome 和 IE 可以忽略不计。

这个问题有解决办法吗？

更新：

.product-hover 
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  overflow: hidden;
  border: 1px solid #ddd;
 

.product-hover:after 
  background: none repeat scroll 0 0 #000;
  content: "";
  height: 100%;
  left: -100%;
  opacity: 0.6;
  position: absolute;
  top: 0;
  width: 100%;
  transition: .4s;

.product-hover a 
  background: none repeat scroll 0 0 #000;
  border-radius: 5px;
  color: #fff;
  display: block;
  font-size: 15px;
  left: 10%;
  margin: 0;
  padding: 10px;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  border: 1px solid #ff0022;
  width: 80%;
  z-index: 99;
  transition: .4s;
  text-decoration:none;

.product-hover a:hover 
  background: #000;
  text-decoration: none;
  border-color: #444;

.product-carousel-price ins 
  color: #ff0022;
  font-weight: 700;
  margin-right: 5px;
  text-decoration: none;

.product-hover a i.fa 
  margin-right: 5px;

.product-hover a.add-to-cart-link 
  top: -25%;
  display: none;

.product-hover a.view-details-link 
  bottom: -25%;

.single-product h2 
  font-size: 18px;
  line-height: 25px;
  margin-bottom: 10px;
  margin-top: 15px;

.single-product h2 a 
  color: #222;

.single-product p 
  color: #ff0022;
  font-weight: 700;

.single-product 
  overflow: hidden;

.single-product:hover  .single-product:hover .product-hover a.add-to-cart-link 
  top: 25%;

.single-product:hover .product-hover a.view-details-link 
  bottom: 40%;

.single-product:hover .product-hover:after 
  left: 0;

<div class="single-product">
  <div class="product-f-image">
    <img src="images/products/product-3.jpg" />
    <div class="product-hover">
      <a href="single-product.html" class="view-details-link"><i class="fa fa-link"></i>مشاهده محصول</a>
    </div>
  </div>

  <h2><a href="single-product.html">New Bag</a></h2>
  <div class="product-carousel-price">
    <ins>$400.00</ins>  <del>$425.00</del>
  </div>
</div>

【问题讨论】：

请提供重现此问题的 html/标记。 （我会看代码，不会看图片）

请在 JS fiddle 中写入块

相关：***.com/questions/11898499/…

每个浏览器呈现不同的字体。 Firefox 始终呈现比 chrome 更重的字体。我的猜测是，这只是过渡中的一个错误，是你真的无法控制的。但是如果没有看到你的代码，就不可能知道。很难从 jpg 修复代码。

【参考方案1】：

我看不到您在我的设置中提到的错误（Firefox 40.0a2 和 Chrome 41.0，Linux）。我认为它在整个动画中与您的“完成后”图像一样大胆而流畅。

您可以尝试的一件事是手动使文本变粗并应用不易察觉的转换，看看您是否至少可以强制文本始终处于“第一状态”。

.view-details-linnk 
   transform: rotate(0.00001deg);

我将这个技巧应用到其他带有 CSS 动画的渲染怪癖中，它有所帮助。

【参考方案2】：

您遇到了 Firefox 更烦人的文本渲染属性之一。为了加快过渡动画的速度，字体没有“完全”渲染，渲染路径被过早切断，因此字体在过渡前后的渲染与过渡期间相比会有所不同。

在https://bugzilla.mozilla.org 上提交问题，以便 Mozilla 了解它，并且可以指出该错误已经在哪里解决，或者可以从您的错误报告中开始跟踪该问题。