css - 字母间距css后的内容

Question

我的目的是在伪元素的内容中包含两个字母，每个字母之间的间距为 1 像素。

我已经尝试了显而易见的方法，它分配了letter-spacing1 个像素：

#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;
}

问题是两个撇号没有得到所需的间距。这是结果的快照：

这就是我想要实现的目标：

怎么做到呢？

Answer 1

问题

问题在于字形的宽度。由于每个撇号字母的宽度都比实际字形多，因此它们似乎已离开。

解决方案

为了解决这个问题，通过分配一个负值来调整字母间距，如下所示：

#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; /* <-- */
}

演示

• 在 dabbet 上