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

希望有所帮助

Answer 2

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

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

Angular4中的自定义字体导入

2 个答案: