CSS: 円マークがバックスラッシュで表示される問題を回避
Webサイトを作成していて、 円マークを表示したいのにバックスラッシュが表示される場合があります。
回避方法
この問題の回避方法を結論から言うと、 CSSのfont-familyを設定し直す必要があります。
font-familyにsans-serifや、 Verdana等の欧文フォントを指定している場合、 バックスラッシュで表示されます。
一方、"ＭＳ Ｐゴシック"や、 "メイリオ"等の和文フォントを指定している場合は円マークが表示されます。
ここまでを整理すると
- 欧文フォントの場合: バックスラッシュで表示
- 和文フォントの場合: 円マークで表示
通常font-familyは複数設定していると思います。 CSSでは一番先に記述しているフォントが優先されます。
円マークがバックスラッシュで表示されて困っている方は、 font-familyの一番先に和文フォントを指定してください。
pre要素やcode要素に注意
ここから先の文章は、 プログラムのサンプル等を表示する場合にあてはまります。
body要素等で和文フォントを指定していても、 pre要素やcode要素内で記述した所はバックスラッシュで表示される場合があります。
しかも面倒な事にブラウザによって、円マークで表示されるか、 バックスラッシュで表示されるかが違います。
pre要素やcode要素は通常、等幅フォントで表示されます。 この等幅フォントをブラウザが独自で設定しています。
ですから、ブラウザによって円マークで表示されるかバックスラッシュで表示されるかが 違ってきます。
これを円マークで統一して表示したい場合はpre要素やcode要素に対しても font-familyに和文フォントを指定すると上手く表示されます。
プログラムのサンプル文中にある円マークがバックスラッシュで表示されている方は、 pre要素やcode要素に対して和文フォントを指定してみてください。