Ionic2 $font-family-base 不工作答案

【问题标题】：Ionic2 $font-family-base not workingIonic2 $font-family-base 不工作
【发布时间】：2016-10-23 00:31:09
【问题描述】：

Ionic2 中的变量$font-family-base 不起作用。

在app.variable.scss 文件中，我添加了一个新值，但旧值仍然存在。

$font-size-base 等其他变量工作正常

这些是我构建 www 的 gulp 任务：

gulp.task("fonts", function () {
    return copyFonts({
        src: [
          "app/fonts/**/*.+(eot|ttf|woff|woff2|svg)"
        ]
    });
});

gulp.task("sass", function () {
    return buildSass({
        sassOptions: {
            includePaths: [
              "node_modules/ionic-angular",
              "node_modules/ionicons/dist/scss"
            ]
        }
    });
});

我错过了什么？

这是我的字体

@font-face {
  font-family: "Maven Pro";
  font-style: normal;
  font-weight: 400;
  src: local("Maven Pro"), local("Maven-Pro-Regular"), url("#{$font-path}/MavenPro-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Maven Pro";
  font-style: normal;
  font-weight: 500;
  src: local("Maven Pro Medium"), local("Maven-Pro-Medium"), url("#{$font-path}/MavenPro-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Maven Pro";
  font-style: normal;
  font-weight: 700;
  src: local("Maven Pro Bold"), local("Maven-Pro-Bold"), url("#{$font-path}/MavenPro-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Maven Pro";
  font-style: normal;
  font-weight: 900;
  src: local("Maven Pro Ultra Bold"), local("Maven-Pro-Regular-Ultra-Bold"), url("#{$font-path}/MavenPro-Black.ttf") format("truetype");
}

这个font-faces在我的app.scss文件中，在我的app.core.scss中引用

app.core.scss：

// http://ionicframework.com/docs/v2/theming/

// App Shared Imports
// --------------------------------------------------
// These are the imports which make up the design of this app.
// By default each design mode includes these shared imports.
// App Shared Sass variables belong in app.variables.scss.
@import "../app";

@import "../users/sus/sus";
@import "../users/sus/home/home";
@import "../users/sus/subjects/german/german";
@import "../users/sus/subjects/math/math";

更新：

如果我使用特定的设备 sass 变量，即：

$font-family-md-base
$font-family-ios-base
$font-family-wp-base

这是一种奇怪的行为，但我猜$font-family-base 必须以特定的顺序或文件设置，我仍然没有弄清楚。

【问题讨论】：

运行gulp任务后，能看到build文件夹下的自定义字体吗？
是的...字体在那里
您是否使用@font-face 规则（使用构建路线）在app.variable.scss 中添加字体？你可以看看如何使用这个规则here
是的，我是。我会更新我的帖子，让你看到它
最后一个问题，对不起...在编译的css文件中，#{$font-path}有正确的值吗？

标签： css ionic-framework sass ionic2 ionic3

【解决方案1】：

我刚刚问过Mike（来自 Ionic Team），他告诉我：

$font-family-ios-base 用于在 ios 设备上时

同样适用于

$font-family-md-base

和

$font-family-wp-base

但我认为关键是：

$font-family-base 是 既不是 ios 也不是 md

我认为这解释了您所说的行为。因此，在您的情况下，您需要更改该字体的值

$font-family-md-base
$font-family-ios-base
$font-family-wp-base

或其中任何一个使其工作。

【讨论】：