2013-03-27 23 views
5

例 'BLACK STAR' ★(U + 2605)CSSコンテンツの特殊文字:通常の文字VS六角

.a:after { 
    content: "\2605"; 
    position:absolute; 
} 

.b:after { 
    content: "★"; 
    position:absolute; 
} 

デモ:http://jsfiddle.net/l2aelba/vBjxX/

誰か/最もHEXを使用することをお勧めする理由はCSS値が\2605ですか?どちらも同じ結果になります。

+1

一部のフォント/ IDEでは、特殊文字が正しく表示されない場合があります。 NetbeansのInconsolataでテストしたところ、星は表示されていません。 –

答えて

3

CSSファイル自体のエンコーディングのために正しく表示されない可能性があるため、下の例のように特殊文字をハードコードする代わりに、実際の値を使用する方が良いでしょう。

+0

アイコンフォントがUnicodeのプライベート使用領域にマップされているため、スタイルシートに文字が表示されていない場合にも、一貫性のポイントがあります。 – daveyfaherty

2

ユニコード番号を追加するにはばかばかしいキーボードショートカットを覚えておく必要はありません。

この16進数は、ユニコードではっきりと標準化された文字を表します。 実際の文字を挿入すると、文字セットと実際にはCSSを表示するために使用されているフォントが表示されます。

もっと重要なことに、多くのアイコンフォント、フォントAwesomeが良い例です。ユニコードのプライベートユースエリアのいずれかを使用するようにマップされています。フォント驚くばかりの文字は最初のプライベートユースエリア内にあります。

標準で定義しているように、プライベートユースエリアには標準化された文字はありません。これは、表示する文字がないことを意味します。したがって、スタイルシート内の唯一の具体的な表現は、Unicodeでの数値参照です。

なぜこれらのアイコンはこれまでにマップされていますか?大きな理由は、一部のスクリーンリーダーがCSSコンテンツで使用されている文字を読み上げるということです。これは間違っているように見えるかもしれませんが、それは起こりますし、それを守る必要があります。私的使用領域の文字は読み出されません。

個人的には、キーボードの文字をそのまま使用し、他のすべてのコードにはユニコード番号を使用します。中国人が自分のコードを使用したいのであれば、自分のキーボードのすべての同じ文字に簡単にアクセスできることを知っていますか?彼らは数字を持っています。