HTML에서 루피 기호가 깨져 보이는 이유
인도 루피 기호(₹)는 HTML에서 다음과 같은 유니코드 문자로 표현할 수 있습니다.
₹
하지만 이 기호는 모든 브라우저와 운영체제에서 지원되는 것이 아닙니다. 사용자의 시스템에 해당 글리프(glyph)를 포함한 폰트가 설치되어 있지 않으면, 기호 대신 빈 상자(□)나 물음표 등이 표시되는 문제가 발생합니다.
웹 폰트(Font Awesome)를 활용한 해결 방법
브라우저 호환성 문제 없이 루피 기호를 확실하게 표시하려면 웹 폰트를 사용하는 것이 가장 안정적인 방법입니다. Font Awesome을 활용하면 시스템 폰트와 무관하게 어느 환경에서든 동일하게 출력할 수 있습니다.
먼저 HTML 문서의 <head> 영역에 Font Awesome 스타일시트를 추가합니다.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
그런 다음 루피 기호를 표시하고 싶은 위치에 다음 코드를 넣으면 됩니다.
<i class="fa fa-inr"></i>
이렇게 하면 별도의 폰트 설치 여부와 관계없이 모든 브라우저에서 루피 기호가 정상적으로 나타납니다.
대체 엔티티 코드 사용하기
10진수 유니코드 코드를 사용하는 방법도 있습니다. 아래 코드 역시 루피 기호를 의미하며, 앞서 소개한 16진수 표기법(₹)과 동일한 결과를 출력합니다.
₹
다만 이 방법 역시 결국 시스템 폰트에 의존하기 때문에, 폰트가 해당 기호를 지원하지 않는 환경에서는 여전히 깨질 수 있다는 점에 유의해야 합니다. 따라서 확실한 호환성이 필요하다면 Font Awesome 같은 웹 폰트 기반 솔루션을 권장합니다.