问题描述
我使用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.scssand 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中导入自定义字体的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!