Angular4中的自定义字体导入

Question

我使用Angular4并且使用我的自定义字体时遇到问题.我尝试使用font-face,但它给我的错误是无法找到font-file.我需要做什么来包含这个文件,以便我可以在我的组件中使用它？

@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;
}

Answer 1

我认为问题在于角度如何重新组装组件中的路径.

我通常做的是在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;
}

希望能帮助到你