1. ホーム
  2. css

[解決済み] CSSのコンテンツ値にユニコード文字を配置する [重複]。

2022-03-15 09:49:39

質問

問題があります。下向き矢印のHTMLコードが見つかりました。 ↓ (↓)

かっこいい。あとはCSSでこんな風に使うんだ。

nav a:hover {content:"&darr";}

これは明らかにうまくいきません。 ↓ はHTMLのシンボルです。cssで使われるこれらのquot;escaped unicode"シンボルについてはあまり情報がないようです。他にも \2020 を見つけたのですが、矢印がありません。矢印のコードは何ですか?

解決方法は?

CSSファイルをUTF-8で保存/提供すればいいのでは?

nav a:hover:after {
    content: "↓";
}

それがダメで、全部ASCIIにしたい場合。

nav a:hover:after {
    content: "\2193";
}

文字列内の Unicode 文字の一般的な書式は次のとおりです。 \000000 から \FFFFFF - バックスラッシュの後に16進数で6桁の数字が続きます。先頭の 0 桁の数字は、Unicode 文字が文字列の最後の文字である場合、または Unicode 文字の後にスペースを追加する場合に使用されます。詳細については、以下の仕様を参照してください。


CSS2仕様の関連部分 :

第三に、バックスラッシュエスケープによって、著者は文書に容易に入れることができない文字を参照することができる。この場合、バックスラッシュの後に最大6桁の16進数(0..9A..F)が続きますが、これはISO 10646(以下、「10646」と略します)を表しています。 [ISO10646】の場合] ) の文字にその番号をつけたもので、0であってはならない。(スタイルシートの が行います。 は、Unicode コードポイント 0 を持つ文字を含んでいます)。16進数の後に[0-9a-fA-F]の範囲の文字が続く場合、その数字の終わりを明確にする必要があります。これには2つの方法があります。

  1. スペース(または他のホワイトスペース文字)を使用した場合: "\26 B"("&B")。この場合、ユーザーエージェントは "CR/LF" のペア (U+000D/U+000A) を1つのホワイトスペース文字として扱います。
  2. 16進数でちょうど6桁の数字を指定することで、" \000026B"("&B" )となります。

実は、この2つの方法は組み合わせて使うこともできます。16進エスケープの後に空白文字が1つだけ無視されます。これは、エスケープシーケンスの後の"real"スペースは2倍にしなければならないことを意味することに注意してください。

数値が Unicode で許容される範囲外である場合 (例えば "\110000" は現在の Unicode で許容される最大 10FFFF を超えている)、UA はエスケープを "replacement character" (U+FFFD) に置換することができます。その文字が表示される場合、UAは"missing character"グリフのような目に見える記号を表示すべきです(cf. 15.2, 点5)。

  • 注:バックスラッシュエスケープは、常に 識別子 や文字列は句読点ではありません(例:"{"は句読点ですが" \7B" は句読点ではありません、また"2" はクラス名ではありませんが、クラス名の先頭では" \32" は許容されます)。
    識別子 "test" は "test" と全く同じ識別子です。

包括的なリストです。 ユニコード文字 'DOWNWARDS ARROW' (U+2193) .