Chrome字体显示模糊 [英] Chrome Font appears Blurry

问题描述

这是我的眼睛！

在IE和Firefox看起来不错

looks fine in IE and Firefox

Chrome（上图）

Chrome(Above)

运行版本39的chrome，
只在模态框中显示模糊，如果我更改字体家庭没有任何区别。

Running version 39 of chrome, only appears blurry in a modal box, does not make any difference if I change the font family.

这是浏览器呈现以下的CSS（对于标签开始）

This is the CSS (for label "Start") the browser renders the following

box-sizing: border-box;
color: rgb(85, 85, 85);
cursor: default;
display: block;
float: left;
font-family: sans-serif;
font-size: 12px;
font-weight: 600;
height: 24px;
line-height: 17.142858505249px;
margin-bottom: 0px;
margin-top: 0px;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
padding-top: 7px;
position: relative;
text-align: right;
visibility: visible;
width: 89.65625px;

是浏览器还是CSS？

- UPDATE ---

--UPDATE---

OK看起来像这个CSS

Ok looks like its this CSS

.md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto !important;
    z-index: 2000;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-50%) translateY(-50%); <--- This line
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

但是如果我把它移出我的模态不再居中？

However if I take it out my modal no longer centres?

推荐答案

在对我的一个元素应用translate transform之后，我在Chrome上遇到了同样的问题。它似乎是一个错误铬。唯一适合我的方法是：

I experienced the same issue on chrome after applying translate transform to one of my elements. It seems to be a bug on chrome. The only thing that worked for me was this:

#the_element_that_you_applied_translate_to {
  -webkit-filter: blur(0.000001px);
}

另一个解决方案可以使用平滑字体渲染：

An Other solution can be turning smooth font rendering on:

#the_element_that_you_applied_translate_to {
  -webkit-font-smoothing: antialiased;
}

这篇关于Chrome字体显示模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！