Question

以下CSS渲染chrome中的字体模糊如何让我的字体不受影响？

.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%); <-- This line
}

Answer 1

这可能是由于多种原因，通常通过使用translateZ(0)锚定z平面来纠正，以便为项目提供自己的复合层 - 但是下面的（组合）也可能产生结果：

backface-visibility: hidden;
transform: translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);

Answer 2

您可能遇到了四舍五入的问题，请参阅以下文章。

http://keithclark.co.uk/articles/gpu-text-rendering-in-webkit/

试试这个。

function centerTarget(tar){
    var y = Math.ceil(tar.height()/2),
        x = Math.ceil(tar.width()/2);

    tar.css('transform','translateX(' + x + 'px) translateY(' + y + 'px)');
}

tar是jquery对象。

虽然这并非真正集中在一个像素内，所以对我来说足够接近：）

Answer 3

只是我的两分钱。

transform: translate3d(-50%, -50%, 0) scale(2, 2);
zoom: 0.5;

只要你不在你的CSS中使用rem，这就有效。由于规模增加了大小，rem单位也增加了，产生了奇怪的副作用。

CSS转换模糊文本

3 个答案: