在Angular4中导入自定义字体 [英] Custom font import in Angular4

问题描述

我使用Angular4，使用我的自定义字体时遇到问题.我尝试使用font-face，但是它给我一个错误，即找不到字体文件.我需要怎么做才能包含此文件，以便可以在组件中使用它?

I use Angular4 and have a problem with making use of my custom font. I tried using font-face but it gives me the error that the font-file cannot be found. What do I need to do to include this file so I can use it in my component?

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

推荐答案

我相信问题在于如何重新设计组件中的路径.

i believe the problem is in how angular reworks the paths in the components.

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

What i usually do is create a font folder under src and put my fonts there. I then create styles folder for my custom styles where i put a font.scss with the following:

$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 并在那里声明我的字体

In my src folder there is a styles.scss. I import my fonts.scss and declare my font there

@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中导入自定义字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！