Question

我在将Google字体中的自定义字体（“Rubik”）添加到我的应用时遇到了困难。

我在fonts文件夹中创建了assets文件夹并放置了字体：

/app/src/assets/fonts
 - rubik.scss
 - rubik-light.woff2
 - rubik-medium.woff2
 - rubik-regular.woff2

rubik.scss文件包含：

/* cyrillic */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  src: local('Rubik Light'), local('Rubik-Light'), url(../assets/fonts/rubik-light.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* hebrew */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  src: local('Rubik Light'), local('Rubik-Light'), url(../assets/fonts/rubik-light.woff2) format('woff2');
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* cyrillic */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  src: local('Rubik'), local('Rubik-Regular'), url(../assets/fonts/rubik-normal.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* hebrew */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  src: local('Rubik'), local('Rubik-Regular'), url(../assets/fonts/rubik-normal.woff2) format('woff2');
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* cyrillic */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  src: local('Rubik Medium'), local('Rubik-Medium'), url(../assets/fonts/rubik-medium.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* hebrew */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  src: local('Rubik Medium'), local('Rubik-Medium'), url(../assets/fonts/rubik-medium.woff2) format('woff2');
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
}

我将rubik.scss文件导入variables.scss，如下所示：

@import "../assets/fonts/rubik.scss";

然后我放置：

// Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files.
// To view all the possible Ionic variables, see:
// http://ionicframework.com/docs/theming/overriding-ionic-variables/
$font-family-base: "Rubik";
$font-family-md-base: "Rubik";
$font-family-ios-base: "Rubik";
$font-family-wp-base: "Rubik";

在网络上，字体会发生变化。但是当我跑步时：

ionic cordova run android --device

字体消失。

我做了一些研究，人们建议做：

删除“www / assets”文件夹并重新编译。
从源中删除一个“fonts”文件夹。
克隆copy.config.js并将其引荐至webpack - 旧版本。

如果我直接将链接导入我的sass文件，该字体也将出现在设备上，这让我想知道，离子转储我的字体的时间和原因。

但是，导入链接会导致某些设备上的应用崩溃。我不明白为什么，因为我无法重现这个问题。

离子信息：

cli packages: (/Users/eliyacohen/.config/yarn/global/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.9
Cordova Platforms  : android 7.0.0
Ionic Framework    : ionic-angular 3.9.2

Ionic 3 - 为应用添加自定义字体

0 个答案: