Chrome字体显示模糊

时间：2014-12-09 17:31:07

标签： css google-chrome

这是我的眼睛！

在IE和Firefox中看起来很好

enter image description here

浏览器（上图）

运行版本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%);
}

然而，如果我把它拿出来，我的模态不再是中心？

23 个答案:

答案 0 :(得分：31)

在将translate转换应用到我的一个元素后，我在chrome上遇到了同样的问题。这似乎是一个关于chrome的错误。唯一对我有用的是：

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

其他解决方案可以打开平滑的字体渲染：

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

答案 1 :(得分：29)

我通过从Y轴的值减去0.5px来解决这个问题。所以代替做：

transform: translateX(-50%) translateY(-50%);

我这样做了：

transform: translateX(-50%) translateY(calc(-50% - .5px));

这解决了我的问题，我发现这是一个更清洁的解决方案，然后摆弄百分比或使用Javascript。

答案 2 :(得分：21)

This fiddle tests out a few different solutions来自：

测试输出

CSS Output

修复0 

-webkit-transform: translateZ(0);
transform: translateZ(0);

修复3 

-webkit-transform: translate3d(0,0,0) !important;
transform: translate3d(0,0,0) !important;

答案 3 :(得分：9)

解决此问题的唯一正确方法：

这个问题源于使用％值来使用css变换对齐div的事实。这会导致小数点子像素值，您的屏幕无法正确呈现。解决方案是规范化生成的转换矩阵。

对于不会转换动画的固定div，可能会更好地工作。但是如果你做了动画，你可以使用后端回调函数来纠正最终状态。

<强>所以： 矩阵（1,0,0,1，-375， -451.5 ）将成为矩阵（1,0,0,1，-375， -451 ）

我在jquery的.show（）之前调用这个方法......或者在应用程序中只有一次（取决于你的情况），你可能还需要在resize事件等上调用它。

function roundCssTransformMatrix(element){
        var el = document.getElementById(element);
        el.style.transform=""; //resets the redifined matrix to allow recalculation, the original style should be defined in the class not inline.
        var mx = window.getComputedStyle(el, null); //gets the current computed style
        mx = mx.getPropertyValue("-webkit-transform") ||
             mx.getPropertyValue("-moz-transform") ||
             mx.getPropertyValue("-ms-transform") ||
             mx.getPropertyValue("-o-transform") ||
             mx.getPropertyValue("transform") || false;
        var values = mx.replace(/ |\(|\)|matrix/g,"").split(",");
        for(var v in values) { values[v]=v>4?Math.ceil(values[v]):values[v]; }

        $("#"+element).css({transform:"matrix("+values.join()+")"});

}

并将其命名为

roundCssTransformMatrix("MyElementDivId");
$("#MyElementDivId").show();

美丽不是吗？

如果您需要更新调整大小，可以使用：

$( window ).resize(function() {
  roundCssTransformMatrix("MyElementDivId");  
});
  

为此，所有父母必须“对齐/标准化”   因为如果你的实例有左边x = 10.1px的主体，那么   孩子是10px ..因为父母的矩阵上有剩余的小数，所以问题不会消失   因此，您必须将此函数应用于父元素的每个元素   使用变换。

您可以在此处查看此实时脚本：https://jsbin.com/fobana/edit?html,css,js,output

答案 4 :(得分：6)

感谢CSS示例。似乎translateX(50%)和translateY(50%)正在计算一个带小数位的像素值（例如，0.5px），这会导致子像素渲染。

对此有很多修复，但如果您想保留文本的质量，那么您现在最好的解决方案是在-webkit-font-smoothing: subpixel-antialiased;上使用.md-modal来强制Chrome等webkit浏览器的呈现状态和Safari。

答案 5 :(得分：3)

我最后通过删除这些行来解决这个问题：

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

答案 6 :(得分：3)

我花了一段时间才找到一个我不打算使用的解决方案，所以我会在这里发布。

我遇到的问题是，div个孩子的width和height属性组合导致了问题。

当我将height更改为另一个值时，它才起作用！

这可能与其他答案有关，但我不想使用任何JS或更改转换属性来修复它。

以下是一个实例：JSFIDDLE

答案 7 :(得分：2)

对于模态框，这个css将有所帮助：

Color

不要将Y轴置于50％，而是将其设为51％。这有助于我的cse。 如果你有不同的定位，可以玩，但通常1％的上/下修复模糊的内容。

答案 8 :(得分：1)

如果要居中放置某个东西，最好使用flexbox。它将帮助您定位而不会模糊文本。

将此添加到要居中的元素的父div ：

display: flex;
justify-content: center;
align-items: center;

希望这会有所帮助。

答案 9 :(得分：1)

TLDR

几天前我遇到了这个问题。我几乎疯狂地尝试在Chrome中增强字体。我已经阅读了该主题中的所有帖子以及有关在Chrome中锐化字体的所有其他帖子。就我而言，即使消息“解决此问题的唯一正确方法”也无济于事。有什么帮助？

值得一提的是，该问题发生在以下div中：

position: sticky;
left: 16%;

“粘性”属性被证明是最大的问题。对于粘性元素，我们将位置设置为``绝对''元素-使用属性``左侧''，``顶部''等。这就是问题所在：如果没有``左侧''的整数值，则字体会显着模糊，使用整数会更好。

解决方案是什么？

position: sticky;    
left: 0;
margin-left: 16%;

仅此而已。 Chrome将处理“边距”百分比，并且字体看起来更清晰。

答案 10 :(得分：1)

您可以通过以下方法解决此问题：

    transform: inherit;

答案 11 :(得分：0)

如果要使用细，常规和粗体文本，则应选择具有相应字体粗细的字体。您应该选择粗细为100的字体。 400 | 700示例：如下所示

字体重量不仅是数字。文件应在服务器或目录中可用。 每个字体粗细都是单独的文件。

如果您在没有资源的情况下将常规字体强制更改为粗体，则会显示模糊。我希望你能明白。

@进口 url（'https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap'）;

答案 12 :(得分：0)

当元素的宽度和高度不是整数时，position: fixed;和transform: translate(...)经常会出现此问题。

解决方案之一是通过编程将数字取整。示例：

function roundToEven(x) {
  const rounded = Math.round(x)
  return rounded % 2 ? rounded + 1 : rounded
}
const element = document.getElementById('element-id')
const rect = element.getBoundingClientRect()
element.style.width = roundToEven(rect.width) + 'px'
element.style.height = roundToEven(rect.height) + 'px'

答案 13 :(得分：0)

使用类似的设置，我的网站也遇到了这个问题。

出现此问题是由于存在0.5px差异。
一个简单的解决方法是将top属性从50%更改为calc(50% - .5px)

答案 14 :(得分：0)

我发现，按照JSuar的建议应用translate3d(0, 0, 0)修复程序可以在Chrome中使用，但不能在Safari中使用。

跨浏览器有效的一件事是使我居中的元素（使用transform: translate(50%, -50%)）具有均匀的像素宽度-将宽度从425px更改为426px使文字再次清晰。

答案 15 :(得分：0)

对于那些仍在尝试解决此问题的人，设置背景出于某种原因为我修复了该问题。 

background: #fff;

答案 16 :(得分：0)

我发现解决此问题（似乎仅在Chrome中且仅在特定屏幕尺寸上才有问题）的最佳方法是替换所有 transform：translate（-50％，50％）定义以及其他解决方案。使用任何其他解决方案都可以在屏幕上解决该问题，但不能在其他屏幕上解决。

转换定义通常用于使元素居中。可以使用解决问题的方法，而不是使用变换定义，而是找到另一种方法来使元素居中。在我们的例子中，我们有一个固定的div，我们想居中，最大宽度为1800px，底部设置为0px； 

#cntr{position:fixed;left:50%;bottom:0;width:100%;max-width:1800px;transform:translateX(-50%);-ms-transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-o-transform:translateX(-50%);text-align:center;}

其中有很多定义可以覆盖所有浏览器。更改为此以解决它：

#cntr{position:fixed;left:0;right:0;margin:auto;bottom:0;width:100%;max-width:1800px;text-align:center;}

更少的代码，更干净，更快，可以100％运行，而无需编辑任何HTML。

现在将固定pos div居中的定义是：left：0; right：0; margin：auto;

不需要翻译，没有小数点后的div。

答案 17 :(得分：0)

Chrome 78似乎仍然存在此错误https://bugs.chromium.org/p/chromium/issues/detail?id=521364。

基于先前的答案，我发现下面的CSS在经过翻译的模式下给了我最清晰的显示：

transform: translate(calc(-50% - .4px), calc(-50% - .4px));

编辑： 为了实现IE11兼容性：

transform: translateX(-50%) translateX(-0.4px) translateY(-50%) translateY(-0.4px);

答案 18 :(得分：0)

如果您不想实现任何特殊的js或自定义解决方案，并且唯一要实现的就是将div居中，并且宽度和高度没有固定大小，则可以使用以下方法：

position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

如果其中一种尺寸是固定的，则可以尝试以下方法：

position: absolute;
left: 50%;
translate: transformX(-50%);
top: 0;
bottom: 0;
margin: auto;

它修复了chrome中字体模糊的问题。

答案 19 :(得分：0)

目前，我只找到一种好的解决方案：

$Output.GetType()

IsPublic IsSerial Name                                     BaseType
-------- -------- ----                                     --------
True     True     PSObject                                 System.Object

0.1％-通常用户看不到

希望Chrome能够解决此问题-该错误自2014年以来就存在））））

答案 20 :(得分：0)

另一个原因可能是您没有提供所需的字体权重。

例如，如果您要同时使用Lato或Roboto，则不仅要包含标准重量，还要包含更多重量。如果您使用的是Google Font API，则此示例适用：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,900|Roboto:500,700">

注意：Lato提供100、300、400、700和900字体粗细，但是我必须为我的700文本指定900才能变得清晰...不知道为什么。

答案 21 :(得分：0)

类似的问题发生在我身上。

我尝试了所有建议的方法，但都无法正常工作。但是，最终我解决了。 谷歌浏览器存在font-weight:600或更多的问题。 尝试将字体系列更改为font-family:"Webly Sleek SemiBold","Helvetica";

font-weight属性可以正常工作。

Blur_Font

Without_Blur

答案 22 :(得分：0)

将CSS转换添加到我的模糊元素的父元素的父元素（使用导致模糊的transformX）实际上消除了令人讨厌的模糊。

相关问题
最新问题