CSS：严重锯齿的三维旋转文本

6fe3ivhb 于 2023-03-20 发布在其他

关注(0)|答案(2)|浏览(137)

请看一下this Codepen。
背景中的文本越多，出现的锯齿就越多。
截图，在macOS上的chrome中拍摄（在FF和Safari中看起来一样）：

我尝试了不同的-webkit-font-smoothing和text-rendering值，用translate3d(0,0,0)和一些更奇怪的巫术。没有什么能得到好的结果。用一点filter: blur我可以掩盖这个问题，显然牺牲了清晰度。
这是生活的必然性（因为显示器有像素），还是可以做些什么？
🙏

来自codepen的代码供将来参考

body {
  background: black;
  text-align: center;
}

div {
  perspective: 1000px;
}

h1 {
  color: white;
  font-weight: 300;
  font-size: 6vw;
  transform: rotate3d(1, -0.4, -0.4, 250deg);
}

html
<div>
  <h1>🤗 Hello World!</h1>
</div>

css

来源：https://stackoverflow.com/questions/75766300/css-heavily-aliased-3d-rotated-text

2条答案

按热度按时间

eufgjt7s1#

我认为这只是浏览器呈现它的方式。如果你真的想摆脱它，只需尝试另一种完全不同的转换方法。：//

赞(0）回复(0）举报 2023-03-20

pod7payv2#

这是浏览器的默认行为，您只能通过减小字体大小和通过变换缩放文本来减少过清晰度。您缩放得越多，文本就越平滑，直到变得模糊。

body {
  background: black;
  text-align: center;
}
div {
  perspective: 1000px;
}
h1 {
  color: white;
  font-weight: 300;
  font-size: 5vw;
  transform: rotate3d(1, -0.4, -0.4, 250deg) scale(4);
}

<div>
  <h1>🤗 Hello World!</h1>
</div>

赞(0）回复(0）举报 2023-03-20

我来回答

CSS：严重锯齿的三维旋转文本

来自codepen的代码供将来参考

2条答案

相关问题

热门标签

最新问答