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

还有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'),
}

Answer 2

我认为问题在于 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;
}

希望对您有所帮助

Angular4 中的自定义字体导入

Custom font import in Angular4

font-face

webpack

angular