6

編集：これは状況のフィドルです。

さて、私はウェブページを構築していますが、イライラするフォントの癖に出くわしています。サンセリフ フォントは、配置されているボックスの左端に正確に配置することを拒否しているようです。

この問題を示すための実験的な HTML を次に示します。

<html>
<head>
    <style>
        .box {
            margin: 30px 0px 0px 30px;
            border: 1px solid #f00;
        }
    </style>
</head>
<body style="font-size: 36px;">
    <!-- text beginning with 'M', which has serifs protruding from the left side in a serif font -->
    <div class="box" style="font-family: 'Segoe UI';">My text</div> <!-- sans-serif -->
    <div class="box" style="font-family: 'Times New Roman';">My text</div> <!-- serif -->
    <div class="box" style="font-family: 'Arial';">My text</div> <!-- sans-serif -->
    <div class="box" style="font-family: 'Garamond';">My text</div> <!-- serif -->

    <!-- text beginning with 'T', which has no left-protruding serifs in a serif font -->
    <div class="box" style="font-family: 'Segoe UI';">Text</div> <!-- sans-serif -->
    <div class="box" style="font-family: 'Times New Roman';">Text</div> <!-- serif -->
    <div class="box" style="font-family: 'Arial';">Text</div> <!-- sans-serif -->
    <div class="box" style="font-family: 'Garamond';">Text</div> <!-- serif -->
</body>
</html>

テキストをコンテナの左端に配置するために設定/変更できるCSS属性に関するアイデアはありますか? エレガントに、つまり、文字ごとのソリューションは本当に好きではありません。

4

1 に答える 1

2

あなたがそれを意味しているかどうかはわかりませんが、おそらくMからその境界までの「マージン」です...

さて、フォントについて説明しましょう...

すべての文字には固定サイズの「ボックス」があります。そのため、フォントの作成者が部屋全体を使用しない場合、この効果が発生する可能性があります。つまり、フォントを編集する以外に、これに対して何かをすることはできません!

これが私が言いたいことの例です（フォント作成のウォークスルー）。

例の図では、上部の M の距離が表示されています。左の M ダッシュを曲線にしない場合は、バージョンのようにまっすぐにすると、境界線と M の間に「ギャップ」ができます。:)

フォント文字ボックス

テキストを選択すると、文字がそのまま正しいことがわかります。「青」の選択は、境界線に沿ってまっすぐ進み、ギャップがないことを示します。レンダリングまたは css エラーがあった場合はどうなるでしょう!

この質問の答えを教えていただければ幸いです。

于 2012-05-08T21:07:52.777 に答える