0

我正在尝试使用旋转在 html 中显示文本以将其显示为 45 度（或足够接近）

不幸的是，它看起来一点也不好看。有谁知道解决此问题的方法，或者可能是在 45 度时比其他字体呈现更好的字体？

以下示例 http://jsfiddle.net/stevewill61/3WpfP/

jsfiddle中横幅的CSS如下

.test:before {
    position: absolute;
    background: #008000;
    display: inline-block;
    content:'Live';
    -webkit-transform: rotate(-45deg);
    font-size: 10pt;
    top: 5px;
    left: -20px;
    font-weight: bold;
    color: #fff;
    padding: 2px 25px;
    box-shadow: 1px 1px 1px #000;
    font-family: Arial;
}

这是要求的图片

http://oi39.tinypic.com/2607ifa.jpg

4

2 回答 2

2

您可以尝试添加字体平滑。我认为最大的问题是字体大小，如果你将大小增加 1 pt，它看起来会更清晰。

-webkit-font-smoothing: subpixel-antialiased;

或者

-webkit-font-smoothing: antialiased;

这是一个小提琴：http: //jsfiddle.net/stevewill61/3WpfP/

还有一些字体平滑的例子：http: //maxvoltar.com/sandbox/fontsmoothing/

于 2013-10-04T14:06:45.880 回答
0

添加-webkit-backface-visibility: hidden到规则

演示在http://jsfiddle.net/3WpfP/5/

于 2013-10-04T14:12:48.823 回答