Question

在我的Ionic2项目中，我将我的字体（ttf格式）放在www / build / fonts文件夹中。但是当我构建应用程序时，字体就会消失。

我该怎么办？

Answer 1

请勿将字体放在 node_modules 或 build 文件夹中。 node_modules文件夹在npm install或npm update上获得更新，并使用每个构建命令创建build文件夹。

我目前正在使用生产应用程序的最佳方式是将您的字体放在 www / fonts 文件夹中，并在 /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 / Angular 2，我希望这将是一段时间的正确答案。

我从Google字体下载了“Varela Round”并简化了文件名，但字体名称保持不变。

将您的字体添加到./src/assets/fonts。修改./src/theme/variables.scss。在底部的“字体”部分下，导入您的字体：

@import '../assets/fonts/varela-round.ttf';

然后在常规CSS中：

  font-family: 'Varela Round';

编辑非Google字体：

这不适用于.otf，我不确定.woff。您可能需要通过转换器运行字体。
如果您不确定字体名称，请先在本地系统上安装它并使用该名称。我刚刚使用一种名为“Fertigo”的字体安装了“Fertigo Pro”

修改

我无法在iOS上使用此解决方案，但以下情况可以解决。

首先，我为忘记Varela Round字体的位置而道歉。我使用了不同的字体，并在此处使用它作为示例。

添加上述字体，但不要在variables.scss中导入它。而是将以下内容添加到app/app.scss：

@font-face { font-family: 'Fertigo'; font-style: normal; font-weight: 400; src: local('Fertigo Pro'), local('Fertigo-Pro'), url(../assets/fonts/fertigo.ttf) format('woff2'); }

如果format('woff2');不起作用，您可能需要尝试使用truetype。

Answer 4

In Ionic 3.4 put your font in asset/fonts (the path is specified in src/theme/variables.scss).

In src/app/app.scss insert the font-face

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    src: local('Raleway'), local('Raleway-Regular'), url("../assets/fonts/Raleway-Regular.ttf") format('woff2');
}

Finally use your font in src/theme/variables.scss overriding the sass variables

$font-family-base: 'Raleway';
$font-family-ios-base: 'Raleway';
$font-family-md-base: 'Raleway';
$font-family-wp-base: 'Raleway';

Answer 5

构建中的字体每次都会消失，因为gulp构建每次都会清除构建文件夹。为避免这种情况，您需要在gulpfile.ts中包含gulp任务。

将以下更改修改为gulpfile.ts。

包含gulp任务，可将 css 和字体添加到您的构建

 gulp.task('myCss', function(){
  return gulp.src('path-to-your-font-lib/style.css')
      .pipe(gulp.dest('www/build/css'))
   });
 gulp.task('myFonts', function(){
  return gulp.src('path-to-your-font-lib/fonts/**/*.+(eot|svg|ttf|woff)')
      .pipe(gulp.dest('www/build/fonts'))
   });

修改您的gulp构建和监视任务，如下所示（添加字体和css on watch and build）

 gulp.task('watch', ['clean'], function(done){
   //existing ionic2 code
 }
 gulp.task('build', ['clean','myCss','myFonts'], function(done){
  //existing ionic2 code
 }

Answer 6

每次构建项目时都会生成离子 v2.1.0 www文件夹。

您必须将字体放在src/assets文件夹中，如下所示。

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

Answer 7

添加自己的字体的最佳方法是使用gulp。我在目录app/theme/fonts中添加自定义字体，并将此源添加到文件ionic-gulp-fonts-copy中的gulp插件gulpfile.js。

// add own src 
gulp.task('fonts', function(){
  return copyFonts({
    src: [
      'node_modules/ionic-angular/fonts/**/*.+(ttf|woff|woff2)',
      'app/theme/fonts/**/*.+(ttf|woff|woff2)'
    ],
    dest: 'www/build/fonts'
  })
});

src中的第一行是默认值，第二行是自定义的。在此之后，您可以使用css，e声明您的字体。克。

/* regular */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(../fonts/opensans/OpenSans-Regular.ttf) format('truetype');
}

尝试一下！

Answer 8

在 Ionic 3.4 上，查看variables.scss，Ionic团队已预设字体路径 $font-path: "../assets/fonts"; 因此，只需将您的字体文件放在assets/fonts文件夹下，然后将以下代码添加到variables.scss

中

ion-app.ios { font-family: "your-font-name" !important; }

您现在应该以这种方式设置全局自定义字体

Answer 9

将您的ttf文件添加到资源＆gt; fonts文件夹。

打开您的应用＆gt; app.scss文件。并粘贴此代码：

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    src: local('Raleway Light'), local('Raleway-Light'), url("../assets/fonts/Raleway-Regular.ttf") format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    src: local('Raleway Light'), local('Raleway-Light'), url("../assets/fonts/Raleway-Regular.ttf") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;

}

使用.ttf文件重命名'Raleway-Light'和'Raleway-Regular.ttf'。
运行离子服务

Answer 10

编译时

ionic 2，如果检查则创建www / build / main.css app.scss上的字体路径通常是../../assets，但在构建过程中这一点无处可去。

在app.scss上添加类似../assets/fonts/fontname.ttf的路径，并在www / assets / fonts / fontname.ttf上添加字体

它对我来说很完美。

Answer 11

我正在研究ionic3 -

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.10.1
    ionic (Ionic CLI) : 3.10.1

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.0

System:

    ios-sim : 5.0.8 
    Node    : v8.4.0
    npm     : 5.4.0 
    OS      : OS X

我创建了新的css文件style.css并在那里写了这些行 -

    @font-face {
      font-family: 'sans_medium';
      src: url('../path/to/css/fonts/Regular.otf'); 
    }
   /*if need more font-face*/
    @font-face {
      font-family: 'sans_regular';
      src: url('fonts/SanFranciscoText-Regular.otf');

    }

将此css文件与索引链接为 -

src/index.html

并添加了这一行

<link href="css/animate.css" rel="stylesheet">

这对我有用......

Answer 12

在ionic2中只需在src / assets /下创建一个文件夹 fonts ，然后将你的字体文件.ttf和.woff也包含在你的sass文件中custom-fonts.scss。在您的gulp服务之后，它将自动复制您在www / assets / fonts /

下的所有文件

Answer 13

在 Ionic 4 中，不再有app.scss，样式已移至CSS变量，并且主要配置位于./theme/variables.scss中。

要使用我自己的字体，我将字体放在./assets/fonts文件夹（我创建的）中。
在./theme/variables.scss中，我添加了：

@font-face {
  font-family: 'Muli';
  font-weight: normal;
  src: url("../assets/fonts/muli-regular.ttf");
}
@font-face {
  font-family: 'Muli';
  font-weight: 300;
  src: url("../assets/fonts/muli-light.ttf");
}

:root {
  --ion-font-family: 'Muli', 'Roboto', 'Helvetica Neue', sans-serif;

Answer 14

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

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

希望这会对你有所帮助。感谢。

自定义字体与Ionic2

14 个答案: