我的目的是在伪元素的内容中包含两个字母,每个字母之间的间距为1个像素。
我尝试了明显的做法,即分配了1个像素的letter-spacing
:
#tweetList > li > .blockstyle > blockquote p.tweettext:before{
content: '\2018\2019';
font-family: 'ocr';
font-style: normal;
font-weight: 400;
position: absolute;
font-size: 120px;
top: 0px;
left: -120px;
color: rgba(26,114,189, 1);
text-shadow: 7px 14px 10px rgba(0, 0, 0, 0.1);
letter-spacing: 1px;
}
问题在于两个撇号未获得所需的间距。这是结果的快照:
这是我想要实现的目标:
怎么做到呢?
最佳答案
问题
问题出在字形的宽度之内。由于每个撇号字母在宽度上都比实际字形占用更多的空间,因此它们似乎已离开。
解
要解决此问题,请通过分配负值来调整字母间距,如下所示:
#tweetList > li > .blockstyle > blockquote p.tweettext:before{
content: '\2018\2019';
font-family: 'ocr';
font-style: normal;
font-weight: 400;
position: absolute;
font-size: 120px;
top: 0px;
left: -120px;
color: rgba(26,114,189, 1);
text-shadow: 7px 14px 10px rgba(0, 0, 0, 0.1);
letter-spacing: -.2em; /* <-- */
}
演示版
on dabblet