css – Chrome字体显示模糊

前端之家收集整理的这篇文章主要介绍了css – Chrome字体显示模糊前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
它在做我的眼睛!

在IE和Firefox看起来不错

Chrome(上图)

运行版本39的chrome,
只在模态框中显示模糊,如果我更改字体系列没有什么不同。

这是CSS(对于标签“开始”),浏览器呈现以下内容

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 —

好像看起来像这个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%);
}

然而,如果我把它从我的模态不再中心?

解决方法

在对我的一个元素应用了translate transform之后,我在Chrome上遇到了同样的问题。它似乎是一个错误铬。唯一对我有用的是:
#the_element_that_you_applied_translate_to {
  -webkit-filter: blur(0.000001px);
}

另一个解决方案可以是平滑字体渲染:

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

猜你在找的CSS相关文章