显示空矩形框而不是 HTML 中的卢比符号答案

【问题标题】：Empty rectanglar box is displayed instead of the rupee symbol in HTML显示空矩形框而不是 HTML 中的卢比符号
【发布时间】：2016-06-05 15:37:59
【问题描述】：

我正在使用此代码来显示卢比符号。

&#x20B9 ; // semicolon is just after 9.

例如

<td> &#x20B9;{{ od.quantity * od.product_sell_price | currency:""}}</td>

但在某些机器/浏览器中显示的是空框而不是卢比符号。对我来说它显示正确，但有些人分享了我的屏幕截图，它是一种空的矩形框。

谁能帮助我为什么会有这种不同的行为以及如何解决它？

【问题讨论】：

标签： html

【解决方案1】：

部分浏览器/操作系统尚不支持卢比符号&#x20B9;。

修复：

您可以使用支持它的 CSS 字体来使用该符号。

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

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

使用类似符号：<del>&#2352;</del> => र
试试&#8377; => ₹
使用图片（糟糕的解决方案但有效）：<img src="http://i.stack.imgur.com/nGbfO.png" width="8" height="10"> =>

【讨论】：

【解决方案2】：

您可以通过 Intl.NumberFormat 做到这一点。

var number = 400000;

console.log(new Intl.NumberFormat('en-IN', {
  style: 'currency',
  currency: 'INR'
}).format(number));

或者将 Icons8 用于Indian Rupee (INR)。

CDN

<!-- Image size: 24px -->
<img src="https://img.icons8.com/material/24/000000/rupee.png">

Base64

&lt;img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVEhL3dUxCwFxGMfxK0UGg4EsNpPZaDZaDcpoMXo13oDZC2CSGGSyMpgsJlJK+P6uri6d+rv/Y/Gtz3BX93/quZPgb3um5FzSwy5SV0IHe+igFTIwT4N20JC+bvyiHjRgFl6lLNrpt5xLetiFSdGKFuGVcfGXPNANq8qIf6YbZJG6aKdJdHgFXr0fesESWksO3ulHdIcOH8NrHZ9q4woNmaIA85o4QUPW8N59UnUcoCH6RGswr4otNOSIBswrYg4NOaMF8/KYQENu6MI8/dGMoCEPDPG3BcELTYVtU4m89QEAAAAASUVORK5CYII="&gt;

【讨论】：