自定義字體未加載離子型

Question

我只是無法在我的離子項目中使用自定義字體。

安慰：

downloadable font: download failed (font-family: "Open Sans" style:normal weight:200 stretch:normal src index:1): status=2147500037 source: file:///Users/MehdiNathani/Desktop/Fitness/Fitness/www/lib/ionic/fonts/opensans-regular-webfont.woff style.css:408:12
------------------------------------------------------------------------

downloadable font: download failed (font-family: "Open Sans" style:normal weight:200 stretch:normal src index:2): status=2147500037 source: file:///Users/MehdiNathani/Desktop/Fitness/Fitness/www/lib/ionic/fonts/opensans-regular-webfont.ttf style.css:408:12
------------------------------------------------------------------------

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

我究竟做錯了什么？

Answer 1

確保您的字體文件夾路徑正確。

我的字體文件夾位於www文件夾中 ，這是我的代碼。

styles.css

@font-face {
 font-family: 'Indie Flower';
 src: url('../fonts/IndieFlower.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}

display.html

<h3 style="font-family: 'Indie Flower'">This is Indie Flower</h3>

當我在android設備上構建它時，這工作得很好。

Answer 2

我不確定lib文件夾的編譯方式是否與其他文件相同。 我添加了自己的自定義字體，並將其保留在css文件夾中。 您可以嘗試僅在文件夾css創建文件夾fonts 。 這樣您可以使用：

@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('opensans-regular-webfont.woff') format('woff'),
  url('opensans-regular-webfont.ttf') format('truetype'),
  url('opensans-regular-webfont.svg') format('svg');
  font-weight: 200;
}

這是我在應用程序中使用的自己的代碼（正在運行）：

@font-face {
    font-family: Rochoes;
    src: url('Rochoes.ttf');
}

@font-face {
    font-family: Vollkorn-Bold;
    src: url('Vollkorn-Bold.ttf');
}

@font-face {
    font-family: Vollkorn-Regular;
    src: url('Vollkorn-Regular.ttf');
}