CSS - 模糊文本/图像 - 变换：倾斜答案

【问题标题】：CSS - Blurry Text/Image - Transform:skewCSS - 模糊文本/图像 - 变换：倾斜
【发布时间】：2016-01-14 08:45:15
【问题描述】：

我的网站上的文字和图像模糊不清，原因是：

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;
}

【问题讨论】：

你用哪些浏览器测试过/看到过这个？
我已经用 Firefox 开发者版和 chrome（最新版本）进行了测试。我使用 Chrome 获得的内容更加模糊。
我在你所说的两个浏览器中都没有遇到任何问题，请你详细说明一下。
我创建了一个 jsfiddle here，但文本看起来与有/没有倾斜相同。您能否确认您是否仍然看到它和/或创建一个演示该问题的 jsfiddle？

标签： html css transform blurry

【解决方案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>

【讨论】：

我仍然将小字体和字体粗细设置为粗体掩盖了这里的问题。尝试使用 20px 字体大小和正常字体粗细，与网站示例相同。我怀疑这比仅对容器使用伪元素是一个更大的问题。
如果我这样做，有没有办法让左侧也倾斜？而且我认为如果您在 overmvp.com 上查看“英雄”部分的图片，会更加困难
所以我注意到模糊仅在页面完成加载时发生。当它加载时，它并不模糊。我尝试删除任何多余的 css 或 js，但这并不能解决问题。

【解决方案2】：

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

文本在 Chrome、Firefox 和 Internet Explorer 中看起来都很棒。

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

不要忘记我们正在处理可缩放矢量项（它处理事物的形状。CSS 中字体的全部目的是它们可以精确地缩放。）这不像使用 HTML Canvas 元素（处理像素...）

如果它看起来与您不同，我猜还有其他问题。可能是本地机器上加载的字体？

更新：我猜这个问题与您的字体选择有关，font-family: bignoodletitling;当我检查您网站的组件时，我看到字体实际上是big_noodle_titling_oblique.woff hmmm。您正在使用倾斜字体并将其拉直。你可以从非倾斜字体开始吗？所以，是的，我确实看到你在哪里旋转然后旋转回来，与你在原始问题中所说的完全一样。所以斜注释并不完全适用。

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

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

【讨论】：

同意我在这个 jsfiddle 中也没有问题。检查overmvp.com，灰色条中的黄色标题很模糊，英雄部分的图像也很模糊。
好的，我明白你的意思。但是我不明白为什么有些文本会被转换而没有被模糊，而其他元素是。我从这个网站上拿了转换的例子，你可以看看上面的菜单，它们的想法几乎一样。 us.battle.net/overwatch/en
不，我没有理顺它：P，默认情况下就是这样。倾斜是使灰色框在侧面倾斜，然后我再次变换文本使其保持笔直
我明白了。一些失真是基于小字体大小。当我放大文字时，看起来非常清晰。我还认为将字体粗细设置回粗体而不是正常时看起来更清晰。
我也同意，当我放大它时，它是超级清晰的。但是如果我把我的文字加粗，它仍然很模糊，但它对我来说更糟糕，我不知道为什么。