font-variant: small-caps;複数のブラウザやプラットフォームで一貫性を保ちたい場合は、を使用することはお勧めできません。
このプロパティで最初に問題に遭遇したとき、別の SO メンバーがここに書いたクロスブラウザーの問題に遭遇しました: font-variant: small-caps; は、Chrome または Firefox を使用したさまざまなフォント サイズを示しています。これを回避するには、テキストを大文字にして、レンダリングの大部分をブラウザから切り離すだけでよいので、単語の最初の文字を大きくするだけで済みます。その事件は解決した。
次に、一時的にサイトを Linux ベースのサーバーから Windows 7 サーバーに移動しました。Windows 7 サーバーと Linux サーバーで表示されたまったく同じサイトが、異なるテキスト サイズで生成されましたfont-variant: small-caps;。クロスブラウザーの問題と同様に、最初の文字と残りの単語のサイズの違いは 1 ～ 2 ピクセルにすぎませんが、複数のテキスト要素が並んでいて、最終的にレイアウトが 10 ピクセルずれてしまいました。したがって、このプロパティのサイジングの問題に関しては、ブラウザーだけが原因ではなく、オペレーティング システムも原因のようです。
最後に、このプロパティを廃止し、テキストを大文字にして、:first-letter疑似要素を使用して目的を達成しました。
その長い説明の後、私の質問は...フォーム要素の外観など、一部のレンダリングがオペレーティングシステムによって部分的に処理されることは知っていますが、テキストのサイズ変更はなぜ影響を受けるのでしょうか? これは完全にブラウザによって処理されると思いました。