自定义字体未在ionic中加载

Custom font not loading in ionic

本文关键字：加载 ionic 字体 自定义      更新时间：2023-09-26

我就是无法获得自定义字体来处理我的Ion项目。

控制台：

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

我做错了什么？

确保字体文件夹的路径正确。

我在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>

当我在安卓设备上构建它时，它运行得非常好。

我不确定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');
}
相关文章：