Angular 4字体渲染问题

Question

我正在尝试在Angular 4应用程序中使用Microsoft的Segoe UI Symbol字体中的挂锁字形（unicode实体＆amp;＃x1f512;），但无法根据应用程序中的位置呈现字形。我创建了这个示例HTML：

<div style="font-size: 2em">
  <p>Default font: &#x1f512;</p>
  <p style="font-family:'Segoe UI Symbol'">Segoe UI Symbol font: &#x1f512;</p>
</div>

如果我将此HTML添加到应用程序的index.html文件中，挂锁看起来很好。但是，如果我将其添加到应用程序的app.component.html文件中，挂锁将呈现为空框。像这样： screen capture

我正在运行Windows 7并在Firefox和Chrome中看到问题。我的测试程序是使用Angular-CLI v1.2和Angular v4.2.6创建的。 知道为什么Angular会这样做吗？

由于