使用 Ionic2 自定义字体

Question

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

我该怎么办？

Answer 1

不要将字体放在 node_modules 或 build 文件夹中。 node_modules 文件夹在 npm install 或 npm update 上获得更新，并且 build 文件夹在每个 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 尘埃落定，我希望这将是一段时间内的正确答案。

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

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

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

然后在你的常规 CSS 中：

  font-family: 'Varela Round';

编辑非 Google 字体：

• 这不适用于.otf，我不确定.woff。您可能需要通过转换器运行字体。
• 如果您不确定字体名称，请先将其安装在本地系统上并使用该名称。我只是使用安装为“Fertigo Pro”的名为“Fertigo”的字体完成此操作

编辑

我无法让此解决方案在 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

在 Ionic 3.4 中，将您的字体放在asset/fonts 中（路径在src/theme/variables.scss 中指定）。

在 src/app/app.scss 中插入字体

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

最后在 src/theme/variables.scss 中使用你的字体覆盖 sass 变量

$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。

• 包括用于将图标 css 和 字体 添加到构建中的 gulp 任务

   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 build 和 watch 任务（添加你的字体 和 css 观看和构建）

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

Answer 6

在 ionic 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 中，并将此源添加到文件gulpfile.js 中的gulp 插件ionic-gulp-fonts-copy。

// 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 声明您的字体，例如。 g.

/* 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

1. 将您的 ttf 文件添加到 assets>fonts 文件夹。

2. 打开您的应用>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;
   

   }

3. 用您的 .ttf 文件重命名“Raleway-Light”和“Raleway-Regular.ttf”。

4. 运行离子服务

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 文件夹中将没有用，因为每次构建应用程序时都会删除并创建 build 文件夹）。

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