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文件夹中有 fonts文件夹，这是我的代码。

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文件夹中。您可以尝试在文件夹fonts中创建文件夹css。这样你就可以使用：

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

自定义字体不加载离子

2 个答案: