2

私の目的は、疑似要素のコンテンツに2つの文字を入れ、各文字の間隔を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;
}

問題は、2つのアポストロフィが目的の間隔を取得していないことです。結果のスナップショットは次のとおりです。

結果のアポストロフィ間隔

そして、これが私が達成しようとしていることです：

必要なアポストロフィ間隔

どのようにそれを行うことができますか？

4

1 に答える 1

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

デモ

于 2012-08-30T08:29:07.433 に答える