angular - Angular4 中的自定义字体导入

Question

我使用 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;
}

Answer 1

我认为问题在于 Angular 如何重新设计组件中的路径。

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

希望对你有帮助