自定义字体与Ionic2

Question

在我的Ionic2项目中,我将我的字体(ttf格式)放在www/build/fonts文件夹中.但是当我构建应用程序时,字体消失了.

我能怎么做 ？

Answer 1

不要将字体放在node_modules或build文件夹中.node_modules文件夹在npm install或npm update上获得更新,并且使用每个构建命令创建build文件夹.

最好的方式,是我目前正在与生产应用程序中使用是把你的字体内部WWW /字体文件夹,并引用它们的内部/app/themes/app.core.scss像下面.

@font-face {
    font-family: 'gurbaniakharregular';
    src: url('../../fonts/gurbaniakhar.ttf.eot');
    src: url('../../fonts/gurbaniakhar.ttf.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/gurbaniakhar.ttf.woff2') format('woff2'),
         url('../../fonts/gurbaniakhar.ttf.woff') format('woff'),
         url('../../fonts/gurbaniakhar.ttf.ttf') format('truetype'),
         url('../../fonts/gurbaniakhar.ttf.svg#gurbaniakharregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Answer 2

在最新的Ionic2 RC,这似乎已经转移到下的某处src/assets,大概src/assets/fonts.在您的SCSS文件中引用这些文件(根据@ indermohan-singh)是相对于CSS文件的,所以就像url("../assets/fonts/aleo-italic-webfont.woff2").

src/assets在构建期间,所有内容都被复制,因此这是您需要的其他东西的好地方,即图像.

Answer 3

Ionic 2 使用名为 ionic-gulp-fonts-copy 的 npm 模块。此 gulp 任务将加载 node_modules/ionic-angular/fonts 目录中存在的字体。为什么不尝试将字体放入该目录中然后再试一次？

（将字体放在构建文件夹中将没有任何用处，因为每次构建应用程序时都会删除并创建构建文件夹）。

希望这对您有帮助。谢谢。