HTMLでルピー記号（₹）を表示する2つの方法｜Font Awesomeと数値文字参照

HTMLでルピー記号を表示する方法

インドの通貨「ルピー」の記号 ₹ は、Unicode では ₹（U+20B9）として定義されています。しかし、この記号はすべてのブラウザでサポートされているわけではなく、閲覧者の環境（OSやインストールされているフォント）によっては正しく表示されないことがあります。

ここでは、Webページ上で確実にルピー記号を表示するための2つの方法を紹介します。

方法1：Font Awesome のアイコンフォントを使う

もっとも手軽で確実性の高い方法が、Font Awesome のアイコンフォントを利用するやり方です。まずスタイルシートを読み込み、fa-inr クラスを指定した要素を配置します。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<i class="fa fa-inr"></i>

これだけで、閲覧者のフォント環境に依存することなく、どのブラウザでも統一されたデザインのルピー記号を表示できます。価格表示など、記号の見た目を揃えたい場面におすすめの方法です。

方法2：数値文字参照（₹）を使う

外部ライブラリを読み込みたくない場合は、HTML の数値文字参照を直接記述する方法も使えます。

₹

₹ は U+20B9 の10進数表記で、このコードを書くことでルピー記号 ₹ が表示されます。ただし、この方法では最終的に記号が正しく描画されるかどうかは閲覧者側のフォントに依存するため、古い環境では表示できない可能性がある点に留意してください。

まとめ

環境差を気にせず安定して表示したいなら Font Awesome、軽量に済ませたいなら 数値文字参照 という使い分けが基本です。用途に応じて最適な方法を選びましょう。