变换导致文本平滑

我有有变换导致文本平滑

transform: rotate(-45deg) scale(1.6);

文本和他的父元素块，其中有

transform: rotate(45deg) translateX(30%)

而且文本平滑。我已经尝试到目前为止：

font-smoothing: antialiased; 
-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale; 
font-variant-ligatures: none; 
-webkit-font-variant-ligatures: none; 
text-rendering: optimizeLegibility; 
-webkit-backface-visibility: hidden; 
transform: perspective(1px) translateZ(0) translate3d(0, 0, 0);

我该如何修复平滑？

来源

2017-10-12 Kirill

把一个完整的代码和HTML/CSS不仅CSS属性 –

这可能是一个浏览器/操作系统的具体问题。在哪个浏览器/操作系统中出现问题？ –

正如你所看到的，这个简单的例子没有平滑的文本。

正如@Temani Afif在评论中所说，如果您想要更准确的回复，请加上一段代码来重现您的问题。

div { 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid gray; 
 
} 
 

 
div:first-child { 
 
    top: 150px; 
 
} 
 

 
p.rotate { 
 
    border: 1px solid blue; 
 
    transform: rotate(45deg) translateX(30%); 
 
} 
 

 
p.rotate span { 
 
    display: block; 
 
    transform: rotate(-45deg) scale(1.6); 
 
    border: 1px solid green; 
 
}

<div> 
 
    <p class=rotate> 
 
    <span>TOTO</span> 
 
    </p> 
 
</div> 
 

 
<div> 
 
    <p> 
 
    <span>TOTO</span> 
 
    </p> 
 
</div>

来源

2017-10-12 12:24:25

变换导致文本平滑

回答

相关问题