どのオペレーティングシステムまたはブラウザでCSSフォントファミリ名の大文字と小文字が区別されるか

StackOverflow https://stackoverflow.com/questions/1602586

質問

sitepoint （ソース一部のオペレーティングシステム/ブラウザの名前を font-family に指定するとき、 は大文字と小文字を区別します。

通常、大文字と小文字が混在する値を常に使用していましたが、小文字の値が同じように機能するかどうか迷っていますか？

どちらの方法でも圧倒的な設定はありませんが、小文字の＆quot; v＆quot; と＆quot;を入力したため、ページのレンダリングが異なるのは嫌です。 V＆quot; はCSSファイルのどこかにあります。

e.g。以下の foo および bar クラスを持つ2つのdivが実際に異なるフォントでレンダリングされる既知のケースはありますか？

div.foo{
  font-family:Verdana, Arial, Helvetica;
}

div.bar{
  font-family:verdana, arial, helvetica;
}
役に立ちましたか？

解決

私の推測は、これはファイルシステムが大文字と小文字を区別するLinux / Unixシステムでのみ潜在的な問題になるということです。フォントはC：\ Windows \ Fontsディレクトリ内の単なるファイルであるため、Windowsブラウザーで問題が発生した場合は驚かされます。

Courier Newのような認識可能なフォントでテストテキストを含むページを作成することもできますが、「CoUrIEr nEW」のように面白い綴りにしてから、 http://browsershots.org/ では、大量のブラウザからスクリーンショットを生成します。スクリーンショットは小さいため、フォントも非常に大きくするようにしてください。

次のようなもの：

<html>
<head>
<style type="text/css">
#proper   { font: bold 48px "Courier New",Courier; }
#improper { font: bold 48px "CoUrIEr nEW",CoUrIEr; }
</style>
</head>
<body>
<p id="proper">Test1 - proper caps</p>
<p id="improper">Test2 - improper caps</p>
</body>
</html>

Courierに 1行のみが表示される場合、そのブラウザでは大文字と小文字が区別されます。

編集：上記で投稿したHTMLをブラウザーショットでテストしました。動作しないブラウザは見つかりませんでした。 Ubuntu Linux用のDillo 2.1.1はどちらのラインも好きではありませんでした（おそらくそのシステムにはCourier NewとCourierの両方が欠けていたのでしょうか？）。ただし、テストされていないモバイルブラウザはまだ存在するため、万が一に備えて適切な大文字を使用するよう努める必要があります。

他のヒント

CSS構文の概要には

と記載されています
  

次のルールが常に成り立ちます。   CSSの制御下にない部分を除き、すべてのCSSスタイルシートは大文字と小文字を区別しません。たとえば、HTML属性＆quot; id＆quot;の値の大文字と小文字は区別されます。 フォント名、およびURIの＆quot; class＆quot;、この仕様の範囲外。特に、要素名はHTMLでは大文字と小文字を区別しませんが、XMLでは大文字と小文字を区別します。

css3-fontsモジュールセクションでは、大文字と小文字を区別しない比較が義務付けられています。

  

他のファミリ名の場合、ユーザーエージェントは@ font-faceルールで定義されたフォントからファミリ名を検索し、次に使用可能なシステムフォントから名前を検索します。大文字と小文字を区別しない比較で。

CSS3仕様では、フォント名は大文字と小文字を区別せずに処理する必要があります。

この男はflexの使用時に問題があるようです。そのため、これにはいくつかの真実があるようです：

  

FlexでCSSを使用してスタイル設定する場合   コンポーネント、font-familyプロパティ   一部では大文字と小文字が区別される場合があります   オペレーティングシステム。たとえば、   次のCSSは私の上では動作しません   Flash Player 10を搭載したSafariブラウザー：

.content{font-family: arial;}
     

しかし、これは動作します：

.content{font-family: Arial;}

ソース

また、あなた自身のブラウザ/ OSでこれを確認するために使用できるこのページを見てください：

http://meyerweb.com/eric/css /tests/font-name-case-test.html

確かにいい質問です。個人的には、大文字と小文字の区別に関係する問題について聞いたことはありません。

さらに心配する必要があるのは、これらのフォントがさまざまなシステムに存在することです。 VerdanaとArialはMacでは使用できません。 HelveticaはWindowsでは使用できません。 Win / Macの寸法で交差領域がゼロの2つのセットを定義しました。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top