【问题标题】: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,默认情况下就是这样。倾斜是使灰色框在侧面倾斜,然后我再次变换文本使其保持笔直
  • 我明白了。一些失真是基于小字体大小。当我放大文字时,看起来非常清晰。我还认为将字体粗细设置回粗体而不是正常时看起来更清晰。
  • 我也同意,当我放大它时,它是超级清晰的。但是如果我把我的文字加粗,它仍然很模糊,但它对我来说更糟糕,我不知道为什么。
猜你喜欢
  • 2023-03-23
  • 2011-07-14
  • 1970-01-01
  • 1970-01-01
  • 2011-01-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-04-12
相关资源
最近更新 更多