9

私はこの非常に単純なマークアップを持っています

<h1>
    <a href="#">
        My Title
    </a>
</h1>

そしてこのCSS

h1 {
   font-variant: small-caps;
}

ここではjsfiddleでレンダリングされます。

この問題は、Twitter Bootstrap の使用に起因します。font-variantテキストは定義されていないようにレンダリングされます。

ブートストラップを削除すると、テキストが期待どおりにレンダリングされるため、ブートストラップが原因であると確信しています。これに対するアイデアや回避策はありますか？

Chrome 26.0.1410.64で試しています

ブートストラップオン

ブートストラップオン

ブートストラップ オフ

ここに画像の説明を入力

4

3 に答える 3

19

設定してみてください：

text-rendering: auto;

更新された jsFiddle を次に示します。 http://jsfiddle.net/XP9jQ/6/

問題が発生したのは、Twitter Bootstrap に次のルールがあるためです。

h1, h2, h3, h4, h5, h6 { text-rendering: optimizelegibility; }.

テキストレンダリング: 読みやすさを最適化します。何らかの理由で、Google Chrome のスモール キャップではうまく機能しません。

于 2013-05-16T18:51:17.033 に答える
6

このスレッドを参照してください。

奇妙なことに、問題は実際にはChromefont-variant: small-caps;であり、タグ内にあるタグに を配置しているという事実ですH#。

どうやら、Chrome は現時点でタグとその子孫small-capsを尊重できないようです。フィドルH#のこの更新を見て、私が何を意味するかを確認してください。

<span>この場合、HTML を変更して、 、<p>、または<div>要素を要素のように見えるように変更する方がよいでしょう。これは、Chrome がそのスタイル<h1>を尊重するためです。small-caps

アップデート：

他の人の投稿を見て、text-rendering: auto実際に Chrome を強制的に適切なレンダリングに戻すことに気付きました。この jsFiddle の更新は、この修正を示しています。Martinの回避策に対する功績。

于 2013-05-16T18:53:30.260 に答える
3

この設定font-variant: small-capsでは、実際の小さなキャップが生成されることはほとんどありません。代わりに、通常の大文字のサイズを縮小するだけで、ブラウザーに偽の小さな大文字を使用させます。これは、例えば「Bootstrap OFF」のスクリーンショットで確認できます。「小さな大文字」は、通常の大文字とはフォント サイズが異なるため、ストローク幅が小さすぎます。

したがって、一部のブラウザが偽の小文字を使用できないという技術的な問題は別として、それは解決されている可能性がありますが、基本的な問題は残ります。つまり、真の小文字を取得できないということです。それらを取得するには、スモール キャップを含む書体、追加のマークアップ、font-feature-settingsスモール キャップを使用する高度な CSS ルール ( など)、およびこれらの CSS 構造をサポートする最新のブラウザーが必要です。また、人々のコンピューターで一般的に使用されているほとんどのフォントには、本当の小さな大文字がありません。

士気は次のとおりです。スモール キャップスの代わりに他のタイポグラフィ デバイスを使用します。

于 2013-05-16T19:41:31.913 に答える