web-dev-qa-db-ja.com

CSSコンテンツ値にUnicode文字を配置する

私は問題があります。下向きの矢印のHTMLコード↓（↓）を見つけました

クール。今私はそのようにCSSでそれを使用する必要があります：

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

↓はHTMLシンボルなので、これは明らかにうまくいきません。 CSSで使用されているこれらの「エスケープされたUnicode」シンボルに関する情報は少ないようです。私が見つけた\2020のような他のシンボルがありますが、矢印はありません。矢印コードは何ですか？

cssunicodesymbolsunicode-escapes
288
davecave

CSSファイルをUTF-8として保存/提供してみませんか。

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

それでも十分ではなく、すべてASCIIのままにしたい場合は、

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

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

CSS2仕様の関連部分 ：

第3に、バックスラッシュエスケープを使用すると、作者は文書に簡単に入れることができない文字を参照できます。この場合、バックスラッシュの後に最大6桁の16進数字（0..9A..F）が続きます。これは、その数字を持つISO 10646（ [ISO 10646] ）文字を表します。 （CSS 2.1では、スタイルシート が にUnicodeコードポイント0の文字が含まれているとどうなるかは未定義です。）[0-9a-fA-F]の範囲の文字が16進数の後に続く場合、数の終わりを明確にする必要があります。それには2つの方法があります。

  1. スペース（または他の空白文字）を含む： "\ 26 B"（ "＆B"）。この場合、ユーザーエージェントは "CR/LF"の組（U + 000D/U + 000A）を単一の空白文字として扱うべきです。
  2. 正確に6桁の16進数を提供することによって： "\ 000026B"（ "＆B"）

実際、これら2つの方法は組み合わせることができます。 16進数エスケープの後に無視されるのは、1つの空白文字だけです。これは、エスケープシーケンスの後の「実」スペースを2倍にする必要があることを意味することに注意してください。

数がユニコードによって許容される範囲外である（例えば、「\ 110000」が現在のユニコードにおいて許容される最大10FFFFを超える）場合、UAはエスケープを「置換文字」（U + FFFD）に置き換えることができる。文字を表示する場合、UAは「行方不明の文字」グリフのような目に見える記号を表示する必要があります（ 15.2、 point 5を参照）。

  • 注：バックスラッシュエスケープは常に identifier または文字列の一部であると見なされます（つまり、 "{"は句読点ではなく、 "\ 7B"は句読点ではありません。 "2"は違いますが）.
    識別子 "te\st"は "test"とまったく同じ識別子です。

包括的なリスト： Unicode文字 'DOWNWARDS ARROW'（U + 2193） 。

439
Matt Ball