我正在尝试使用旋转显示html中的文本,以45度(或接近该值)显示它
不幸的是,它看起来并不好看。有没有人知道一种方法来解决这个问题,或者是一种在45度下比其他字体更好的字体?
以下示例 http://jsfiddle.net/stevewill61/3WpfP/
jsfiddle中的Banner的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;
}
这是根据要求提供的照片
答案 0 :(得分:2)
您可以尝试添加字体平滑。 我认为最大的问题是字体大小,如果你将尺寸提高1以上,它看起来会更清晰。
-webkit-font-smoothing: subpixel-antialiased;
或
-webkit-font-smoothing: antialiased;
这是一个小提琴: http://jsfiddle.net/stevewill61/3WpfP/
字体平滑的一些例子: http://maxvoltar.com/sandbox/fontsmoothing/
答案 1 :(得分:0)
将-webkit-backface-visibility: hidden
添加到规则