我正在尝试使用 rotate 以 45 度(或接近 45 度)显示 html 中的文本
不幸的是,它看起来一点也不好。有谁知道解决此问题的方法,或者当它比其他字体达到 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
您可以尝试添加字体平滑。我认为最大的问题是字体大小,如果你将大小再提高 1 pt,它看起来会更清晰。
-webkit-font-smoothing: subpixel-antialiased;
或
-webkit-font-smoothing: antialiased;
这是一个小提琴:http://jsfiddle.net/stevewill61/3WpfP/
以及字体平滑的一些示例:http://maxvoltar.com/sandbox/fontsmoothing/
将-webkit-backface-visibility: hidden
添加到规则中
http://jsfiddle.net/3WpfP/5/演示