Ionic2 $font-family-base 不工作
Ionic2 $font-family-base not working
Ionic2 中的变量 $font-family-base
无效。
在 app.variable.scss
文件中我添加了一个新值,但旧值仍然存在。
$font-size-base
等其他变量工作正常
这些是我的 gulp 建设任务 www
:
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
必须在特定的顺序或文件中设置,我仍然没有弄明白。
我刚问过 Mike(来自 Ionic 团队),他告诉我:
$font-family-ios-base
is for when it is on an ios device
同样适用于
$font-family-md-base
和
$font-family-wp-base
但我认为关键在于:
$font-family-base
is when it's neither ios or md
我认为这可以解释您所说的行为。因此,在您的情况下,您需要更改
中该字体的值
$font-family-md-base
$font-family-ios-base
$font-family-wp-base
或其中任何一个使其工作。
Ionic2 中的变量 $font-family-base
无效。
在 app.variable.scss
文件中我添加了一个新值,但旧值仍然存在。
$font-size-base
等其他变量工作正常
这些是我的 gulp 建设任务 www
:
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
必须在特定的顺序或文件中设置,我仍然没有弄明白。
我刚问过 Mike(来自 Ionic 团队),他告诉我:
$font-family-ios-base
is for when it is on an ios device
同样适用于
$font-family-md-base
和
$font-family-wp-base
但我认为关键在于:
$font-family-base
is when it's neither ios or md
我认为这可以解释您所说的行为。因此,在您的情况下,您需要更改
中该字体的值$font-family-md-base
$font-family-ios-base
$font-family-wp-base
或其中任何一个使其工作。