Angular4中的自定义字体导入答案

【问题标题】：Custom font import in Angular4Angular4中的自定义字体导入
【发布时间】：2018-03-10 00:07:17
【问题描述】：

我使用 Angular4，但在使用我的自定义字体时遇到了问题。我尝试使用 font-face，但它给了我无法找到字体文件的错误。我需要做什么才能包含此文件以便在我的组件中使用它？

@font-face {
  font-family: 'lcd-plain';
  src: url('/simaxx-front-end/src/main/webapp/src/assets/fonts/lcd-plain/lcd-plain.eot'); /* For IE */
  src: url('/simaxx-front-end/src/main/webapp/src/assets/fonts/lcd-plain/lcd-plain.ttf') format('truetype'), /* For Chrome and Safari */
  url('/simaxx-front-end/src/main/webapp/src/assets/fonts/lcd-plain/lcd-plain.woff') format('woff'); /* For FireFox */
  /*format("truetype"), url("/simaxx-front-end/src/main/webapp/src/assets/fonts/lcd-plain/lcd-plain.svg#LCD")*/
  /*format("svg");*/
}

svg.gauge {
  font-family: 'lcd-plain', Helvetica, Arial, sans-serif;
}

【问题讨论】：

标签： angular webpack font-face

【解决方案1】：

有src 属性which can be a URL to a remote font file location or the name of a font on the user's computer。因此，如果您将资产文件夹作为静态文件提供，并且其中有字体文件夹，您应该能够相对于您的应用程序的 URL 引用字体文件，如下所示：

@font-face {
  font-family: 'lcd-plain';
  src: url('/fonts/lcd-plain/lcd-plain.ttf') format('truetype'),
}

【讨论】：

感谢您的回答！但是我收到目录无法解析的错误:(我已将包含我的字体文件夹的资产文件夹包含在资产内部的 angular-cli.json 中：“资产”：[“资产”，“字体” , "favicon.ico" ]
什么时候出现错误？在编译时，还是在运行时？错误到底是什么样的？
我的 IDE (webstorm) 导致了这个问题。它无法识别路径，并且在我运行应用程序时无法显示正确的字体。
尝试导航到localhost:4200/fonts/lcd-plain/lcd-plain.ttf 或您的情况下的任何网址。字体应该由开发服务器提供。如果没有，请尝试从那里弄清楚。
它进入我的谷歌文档查看器并显示字体，所以你给我的路径是正确的。

【解决方案2】：

我认为问题在于角度如何修改组件中的路径。

我通常做的是在 src 下创建一个字体文件夹并将我的字体放在那里。然后，我为我的自定义样式创建样式文件夹，我在其中放置了一个 font.scss，其中包含以下内容：

$archistico-woff-font-path: "./fonts/archistico_bold-webfont.woff";
$archistico-woff2-font-path: "./fonts/archistico_bold-webfont.woff2";
$font-family-brand: 'archisticobold';

在我的 src 文件夹中有一个 styles.scss。我导入我的 fonts.scss 并在那里声明我的字体

@import "./src/styles/fonts";
@font-face {
    font-family: 'archisticobold';
    src:url($archistico-woff2-font-path) format('woff2'),
        url($archistico-woff-font-path) format('woff');
    font-weight: normal;
    font-style: normal;
}

希望对你有帮助

【讨论】：

这太棒了！