font-face - 自定义字体未在 ionic 框架中加载

Question

我想在我的 Ionic 项目中应用 Open Sans 字体。我在我的自定义 scss 文件(settings.sccs 和其他 scss 文件)所在的 SCSS 文件夹中使用了此代码( demoProject\scss_setting.scss )

@font-face {
  font-family: 'Open Sans';
  src: url('../www/fonts/opensans-regular-webfont.eot');
  src: url('../www/fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
  url('../www/fonts/opensans-regular-webfont.woff') format('woff'),
  url('../www/fonts/opensans-regular-webfont.ttf') format('truetype'),
  url('../www/fonts/opensans-regular-webfont.svg') format('svg');
  font-weight: 200;
}
body{
 font-family: 'Open Sans';
}

字体位于此处( demoProject\www\fonts )

并尝试应用于全身，但浏览器的控制台显示

 GET http://localhost:8100/www/fonts/opensans-regular-webfont.woff 
:8100/www/fonts/opensans-regular-webfont.ttf:1
GET http://localhost:8100/www/fonts/opensans-regular-webfont.ttf 

Answer 1

我相信您在目录链中走得太远了。

我想你想要更像这样的东西:

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/opensans-regular-webfont.eot');
    src: url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/opensans-regular-webfont.woff') format('woff'),
    url('../fonts/opensans-regular-webfont.ttf') format('truetype'),
    url('../fonts/opensans-regular-webfont.svg') format('svg');
    font-weight: 200;
}
body{
    font-family: 'Open Sans';
}

这是将 Font Awesome 添加到您的项目中的教程，它是一种自定义字体:

https://www.thepolyglotdeveloper.com/2014/10/use-font-awesome-glyph-icons-ionicframework/

如果这对您有帮助，请告诉我。

问候，