我的目的是在伪元素的内容中包含两个字母,每个字母之间的间距为 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; /* <-- */
}
演示
关于css - 字母间距 css 后的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12192653/