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

【问题标题】：Can’t set custom font when using SASS - Ionic framework使用 SASS - Ionic 框架时无法设置自定义字体
【发布时间】：2015-04-26 10:44:37
【问题描述】：

我想使用 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 类的字体没有显示正确的字体，而只是 ionic 默认字体。

【问题讨论】：

那有什么不好的呢？它编译吗？有错误吗？您是否检查了编译后的 CSS 以验证您的更改是否存在并显示为应有的样子？
它可以编译但它没有显示正确的字体，我检查了编译后的 CSS，它似乎是正确的。
那么您是否检查过您的检查器以查看元素应用了哪些样式？你确认字体的路径是正确的吗？
是的，样式被应用到元素上。您能告诉我如何验证字体的路径是否正确吗？
可以下载吗？

标签： css sass ionic-framework font-face compass-sass

【解决方案1】：

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

将您的 .login_title 以及所有未来的样式更改放在 Ionic @import 上方

【讨论】：

不清楚这里的实际问题是什么，不知道如何提供答案。你确实明白第二个代码块是 Sass，对吧？