代码之家 › 专栏 › 技术社区 › Simon

字母间距后的内容css

letter-spacing typography css

2

Simon · 技术社区 · 12 年前

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

我已经尝试了显而易见的方法,即分配 letter-spacing 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: 1px;
}

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

result apostrophe spacing

以下是我努力实现的目标:

desired apostrophe spacing

如何做到这一点?

1 回复 | 直到 12 年前

1

Eliran Malka 12 年前

问题

问题在于字形的宽度。由于每个撇号字母的宽度都比实际的字形占用了更多的空间,所以它们似乎已经离开了。

解决方案

要解决此问题,请通过指定负值来调整字母间距,如下所示:

#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