CSS - サンスセリフフォントをモノスペースフォントに似せてください

Question

私のWebページのロゴ/ホームボタンは、私のプロジェクトの略語です（使用する一時的な文字はABCDEFです）。フォントのArialを使用しています（後で変更することもできます）。ロゴの写真からわかるように、文字は完全には互いに整列していません。

私は役立ちますが、完全に、それは私はそれがやりたいことはありませんfont-kerning: none;を試してみました。

私はこの例ではjsfiddleを作り、ここにリンクだしました：https://jsfiddle.net/7dfetxto/

はそうでない場合は、ここに私のコードは、（jsfiddleと同じ）です。

HTML

<div id="logo"> 
    <a href="#"> 
    <h1>ABC</br>DEF</h1> 
    </a> 
</div> 

CSS

#logo{ 
    font-family: "arial", "times", "sans-serif"; 
    width: 128px; 
    height: 100%; 
    background-color: #336699; 
    float: left; 
} 
#logo a{ 
    width: 100%; 
    height: 100%; 
    display: block; 
    text-decoration: none; 
} 
#logo h1{ 
    margin: 0px; 
    padding: 26px 30px; 
    text-align: center; 
    text-transform: uppercase; 
    font-kerning: none; 
    display: block; 
    color: white; 
} 

私の目標は、2行目の文字を1行目のそれぞれの文字の直下に置くことです。

ありがとうございます。

Answer 1

文字間隔

使用CSS letter-spacingプロパティ。

JSfiddle。

#logo { 
 
    font-family: "arial", "times", "sans-serif"; 
 
    width: 128px; 
 
    height: 100%; 
 
    background-color: #336699; 
 
    float: left; 
 
} 
 
#logo a { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
    text-decoration: none; 
 
} 
 
#logo h1 { 
 
    margin: 0px; 
 
    padding: 26px 30px; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    font-kerning: none; 
 
    display: block; 
 
    color: white; 
 
} 
 
.h1b { 
 
    letter-spacing: 3.25px; 
 
}

<div id="logo"> 
 
    <a href="#"> 
 
    <h1>ABC<br><span class="h1b">DEF</span></h1> 
 
    </a> 
 
</div>

あなたは、これは面白いかもしれません：kerningjs

より多くの可能な方法があります。 JSFiddle：一つは、大きな（この場合は）二行目のfont-sizeを行うことにより

フォントサイズ

あり、それは最初の行の両側に成長し、到達します。