使用 SASS 时无法设置自定义字体 - Ionic 框架

Question

我想使用 SASS 设置自定义字体。当我使用 style.css 文件的默认配置时，我能够做到这一点，但是当我尝试运行 ionic.app.scss 上的相同代码时，它不起作用。

//style.css

@font-face {
font-family: 'Bariol_Regular';
src: url('../lib/ionic/fonts/Bariol_Regular.eot');
src: url('../lib/ionic/fonts/Bariol_Regular.eot') format('embedded-opentype'),
     url('../lib/ionic/fonts/Bariol_Regular.woff2') format('woff2'),
     url('../lib/ionic/fonts/Bariol_Regular.woff') format('woff'),
     url('../lib/ionic/fonts/Bariol_Regular.ttf') format('truetype'),
     url('../lib/ionic/fonts/Bariol_Regular.svg#Bariol_Regular') format('svg');
}

.login_title {
font-family: "Bariol_Regular";
text-align: center;
}

//ionic.app.scss

$ionicons-font-path: "../lib/ionic/fonts" !default;

//Common
@font-face {
    font-family: 'Bariol_Regular';
    src: url("../lib/ionic/fonts/Bariol_Regular.eot");
    src: url("../lib/ionic/fonts/Bariol_Regular.eot") format('embedded-opentype'),
         url("../lib/ionic/fonts/Bariol_Regular.woff2") format('woff2'),
         url("../lib/ionic/fonts/Bariol_Regular.woff") format('woff'),
         url("../lib/ionic/fonts/Bariol_Regular.ttf") format('truetype'),
         url("../lib/ionic/fonts/Bariol_Regular.svg#Bariol_Regular") format('svg');
    font-weight: normal;
    font-style: normal;
}

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

.login_title {
    font-family: "Bariol_Regular";
    text-align: center;
}

scss 编译正确，但是 login-title class 的字体没有显示正确的字体，只显示 ionic 默认字体。

Answer 1

您的 CSS 是在 Ionic 样式之后被调用的，并且它们的优先级高于您的更改。

将您的 .login_title 和所有未来的样式更改放在 Ionic @import

之上

使用 SASS 时无法设置自定义字体 - Ionic 框架

Can’t set custom font when using SASS - Ionic framework

css

sass

font-face

compass-sass

ionic-framework