содержимое после межбуквенного интервала css

Моя цель состоит в том, чтобы иметь две буквы в содержимом псевдоэлемента с интервалом в 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;
}

Проблема в том, что два апострофа не получают желаемого интервала. Вот снимок результата:

результат между апострофами

И вот чего я пытаюсь добиться:

желаемый интервал между апострофами

Как это сделать?


css typography letter-spacing
person Simon    schedule 30.08.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема

Проблема заключается в ширине глифа. Поскольку каждая буква апострофа занимает больше места по ширине, чем сам глиф, они кажутся устаревшими.

Решение

Чтобы решить эту проблему, отрегулируйте расстояние между буквами, назначив отрицательное значение, например:

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

Демо

person Eliran Malka    schedule 30.08.2012