Question

由于以下原因，我的网站上的文字和图片模糊不清：

transform:skew(0.25rad)

这是我的HTML：

<div class="one">
    <h3>TITLE</h3>
</div>

这是我的CSS：

.one{
    background:#323232;
    box-sizing:border-box;
    transform: skew(-0.25rad);
    padding:3px 20px;
    border-radius:4px;
    margin:0 -7px;
}
.one h3{
    box-sizing:border-box;
    transform:skew(0.25rad);
    color:#ffc70e;
    font-size:20px;
    letter-spacing:0.8px;
}

Answer 1

使用webkit浏览器进行2d或3d变换后的“模糊文本”已被多次讨论[1]。但在您的情况下，您可以仅对伪元素应用转换，以便您的文本不受skew属性的影响。

它还会让您在标记中只使用一个标记：

@import url(http://fonts.googleapis.com/css?family=Oswald);
body{color:#fff;font-weight: bold;font-size:50px;font-family:'Oswald',sans-serif;}

.parent {
    width: 300px;
    overflow: hidden;
    padding-left: 5%;
    position:relative;
}

.parent::before {
    content :'';
    position:absolute;
    top:0;left:0;
    width:100%; height:100%;
    background: rgba(90,190,230,0.9);
    transform-origin:0 0;
    transform:skew(-10deg);
    z-index:-1;
}

<div class="parent">
    Hello
</div>

Answer 2

我无法使用原始代码重现错误。这是JSfiddle ...

该文字在Chrome，Firefox和Internet Explorer中都很棒。

<div class="one">
    <h3>TITLE</h3>
</div>

不要忘记我们正在处理Scalable Vector项目（处理事物的形状...... CSS中字体的整体目的是它们可以精确地扩展。）这与使用HTML Canvas元素不同（处理像素...）

如果它看起来与你不一样，我猜其他错误。也许你的本地机器上加载了字体？

更新：我猜这个问题与你的字体选择有关，font-family：bignoodletitling;当我检查您网站的组件时，我发现字体实际上是big_noodle_titling_oblique.woff嗯。你正在采用斜字体并将其拉直。你能从非倾斜字体开始吗？所以，是的，我确实看到你旋转的地方然后向后旋转，与你在原始问题中所说的完全相同。因此倾斜评论并不完全适用。

不太确定如何提供帮助。也许试试几种不同的字体？ JS小提琴很清楚。

增加标题文本清晰度的另一个想法是将背景颜色（.omvp-title-container）从＃323232更改为黑色（＃000）。

CSS - 模糊文本/图像 - 变换：偏斜

2 个答案: