0

Safari、Opera、Chromeで私のページのテキストがぼやけて見える：http：//testowa.portalo.pl/wiadomosci.php

私はそのようなCSSを使用しています：

.tytulmalykom {
    color:#666666;
    font-size:11px;
    font-variant:small-caps;
}

FirefoxとInternetExplorerで問題なく動作します。代替案はありますか？

4

1 に答える 1

3

ほとんどのフォントにはスモールキャップスの書体がないためfont-variant:small-caps、ブラウザは偽のスモールキャップスを生成します。これは、大文字に変換してフォントサイズを小さくすることで実現します。結果は、フォント、ブラウザ、ディスプレイデバイス、およびその他の要因に応じて、許容できるものからひどいものまでさまざまです。特に、ブラウザが異なれば、ここではサイズの縮小が異なります。

したがって、大文字と小文字の変換とフォントサイズの縮小を自分で行うことで、より一貫した結果を得ることができます。テキストが大文字と小文字が混在していると不器用になります。大文字と小文字の区別を維持するために「Foo」をスモールキャップスでレンダリングするには、を使用する必要がありますF<span class="sc">oo</span>（およびを設定text-transform: uppercaseしfont-size: ...ます.sc）。そして、結果は活字​​的に良くありません。そのためには、タイポグラファーがデザインしたスモールキャップスフォントが必要です。ただし、少なくとも、異なるブラウザで同じフォントサイズを縮小できる可能性があります。（フォントサイズの適用にはわずかな違いがあるため、保証されていません。）

于 2012-06-27T19:25:52.727 に答える