「軽量」と「大胆」フォントウェイトが機能しないのはなぜですか？

Question

私はIonicアプリを作成しています。カスタムフォント 'Rubik'を使用したいと思います。私は軽量で大胆なフォントウェイトをインポートしていますが、通常のフォントウェイトを使用したスタイルを追加しても、動作していないようです。私も試してみました

@font-face { 
    font-family: 'Rubik'; 
    src: url('#{$font-path}/Rubik-Light.otf') format('opentype'); 
    font-weight: lighter; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'Rubik'; 
    src: url('#{$font-path}/Rubik-Regular.otf') format('opentype'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'Rubik'; 
    src: url('#{$font-path}/Rubik-Bold.otf') format('opentype'); 
    font-weight: bold; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'Rubik'; 
    src: url('#{$font-path}/Rubik-Black.otf') format('opentype'); 
    font-weight: bolder; 
    font-style: normal; 
} 

：

@import url('https://fonts.googleapis.com/css?family=Rubik'); 

これらはvariables.scssファイルに配置されているここでは、コードです。現時点では、通常のように新しいフォントファミリに割り当てた場合には、より軽く/大胆にしか使用できません。 ionic（roboto、noto-sans）がインストールされているデフォルトのフォントでは、より軽くて大胆な作業が可能です。何か案は？

Answer 1

私はインポート/このようにそれをロードし、唯一の希望のフォントの重みになるだろう：

このようなフォントフェースの定義

<link href="https://fonts.googleapis.com/css?family=Rubik:300,400,700,900" rel="stylesheet"> 

：

@font-face { 
    font-family: 'Rubik'; 
    src: url('#{$font-path}/Rubik-Light.otf') format('opentype'); 
    font-weight: 300; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'Rubik'; 
    src: url('#{$font-path}/Rubik-Regular.otf') format('opentype'); 
    font-weight: 400; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'Rubik'; 
    src: url('#{$font-path}/Rubik-Bold.otf') format('opentype'); 
    font-weight: 700; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'Rubik'; 
    src: url('#{$font-path}/Rubik-Black.otf') format('opentype'); 
    font-weight: 900; 
    font-style: normal; 
} 

そして、このようにそれを使用して：

を

h1 { 
    font-family: 'Rubik', sans-serif; 
    font-weight: 900; 
} 
h2 { 
    font-family: 'Rubik', sans-serif; 
    font-weight: 700; 
} 

p { 
    font-family: 'Rubik', sans-serif; 
    font-weight: 400; 
} 

fig { 
    font-family: 'Rubik', sans-serif; 
    font-weight: 300; 
} 

scssで関数/ mixinを作成したり、変数を定義してこれらのフォントの重みに簡単にアクセスすることもできます次のようにしてください：

@mixin fontRubik($weight) { 
    @if($weight == 'bold') { 
    font-weight: 700; 
    } @elseif($weight == 'black') { 
    font-weight: 900; 
    } @elseif($weight == 'light') { 
    font-weight: 300; 
    } @else { 
    font-weight: 400; 
    } 
} 

Answer 2

lighterを意味します。フォントの利用可能な重みのうち、1つのフォントの重みが親要素より軽くなります。

bolderを意味する（フォントの利用可能な重みの中で）親要素より重い1つのフォントの重さ。

これらは、相対の重みです。

新しいフォントフェースを定義するときに、指定したウェイトに対して定義する場合は、絶対ウェイトでなければなりません。それが相対的であることは何もありません。

これはlighterとbolderがvalid valuesに記載されていない理由、なぜyour CSS will be reported as invalidですか。