自定义字体未在离子框架中加载

Question

我想在Ionic Project中应用Open Sans字体。我在我的SCSS文件夹中使用此代码，其中包含我的自定义scss文件（settings.sccs和其他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添加到项目中的教程，这是一种自定义字体：

http://blog.nraboy.com/2014/10/use-font-awesome-glyph-icons-ionicframework/

如果有帮助，请告诉我。

此致

Answer 2

您的字体应位于 的 demoproject /网络/ LIB /离子/字体

然后从css中引用（在它的默认位置 www / css / stylesheet.css 就像这样：

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