2016-06-21 1 views
0

Ionic2の変数$font-family-baseが機能しません。

ファイルapp.variable.scssに新しい値を追加しましたが、古い値が残ります。 $font-size-baseよう

他の変数には、細かい

それらを働いている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" 
      ] 
     } 
    }); 
}); 

私は何をしないのですか?

このは私app.core.scss

app.core.scssで参照されている私のapp.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"); 
} 

をフォントが、直面している次のとおりです。

// 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"; 

UPDATE:

私はそれが特定のデバイスSASSにすなわち変数を使用しない場合:

  • $のfont-family-MD-ベース
  • $のfont-family-IOS-ベース
  • $フォント-family-WP-ベース

ターはwird動作ですが、私はまだ把握していないものを、$font-family-baseは、特定の順序またはファイルに設定する必要があると思います。

+0

gulpタスクの実行後、カスタムフォントがビルドフォルダに表示されますか? – sebaferreras

+0

はい...フォントがあります – DAG

+0

'@ font-face'ルール(ビルドルートを使用)を使って' app.variable.scss'にフォントを追加していますか?あなたはこのルールを使う方法を見てみることができます[here](https://css-tricks.com/snippets/css/using-font-face/) – sebaferreras

答えて

4

は、私はちょうど(イオンチームから)Mikeを求めてきましたし、彼は私に言った:

$font-family-ios-baseは、iOSデバイス上にあるときのためにある

そして、同じことが

に適用されます
$font-family-md-base 

および

しかし、私は鍵があることだと思う:

$font-family-baseはそれが IOSやMD

どちらだとき、私は、これはあなたが話していた動作を説明すると考えています。あなたのケースでは、そのフォントの値を

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

に変更するか、それらのいずれかを動作させる必要があります。