2

SASSバージョンで使用し、フォントの 3 つのバリアント( Light、Regular、Bold3.2.9 (Media Mark) ) でカスタムを使用したいと考えています。font-familySource Sans Pro

これは私の_font.scssファイルです：

// the charset to use
@charset "UTF-8";

// the relative path to the fonts directory
$sansSourceProPath: "../fonts/SourceSansPro" !default;

// the font-family
$default-font-family: 'Source Sans Pro';

/*
Light
*/
@font-face {
  font-family: #{$default-font-family};
  src: url('#{$sansSourceProPath}/sourcesanspro-light-webfont.eot');
  src: url('#{$sansSourceProPath}/sourcesanspro-light-webfont.eot?#iefix') format('embedded-opentype'),
  url('#{$sansSourceProPath}/sourcesanspro-light-webfont.woff') format('woff'),
  url('#{$sansSourceProPath}/sourcesanspro-light-webfont.ttf') format('truetype'),
  url('#{$sansSourceProPath}/sourcesanspro-light-webfont.svg#sourcesanspro-light') format('svg'); // EDITED
  font-weight: 300; // EDITED
  font-style: normal;
}

/*
Regular
*/
@font-face {
  font-family: #{$default-font-family};
  src: url('#{$sansSourceProPath}/sourcesanspro-regular-webfont.eot');
  src: url('#{$sansSourceProPath}/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
  url('#{$sansSourceProPath}/sourcesanspro-regular-webfont.woff') format('woff'),
  url('#{$sansSourceProPath}/sourcesanspro-regular-webfont.ttf'), format('truetype'),
  url('#{$sansSourceProPath}/sourcesanspro-regular-webfont.svg#sourcesanspro-regular') format('svg'); // EDITED
  font-weight: 400; // EDITED
  font-style: normal;
}

/*
Bold
*/
@font-face {
  font-family: #{$default-font-family};
  src: url('#{$sansSourceProPath}/sourcesanspro-bold-webfont.eot');
  src: url('#{$sansSourceProPath}/sourcesanspro-bold-webfont.eot?#iefix') format('embedded-opentype'),
  url('#{$sansSourceProPath}/sourcesanspro-bold-webfont.woff') format('woff'),
  url('#{$sansSourceProPath}/sourcesanspro-bold-webfont.ttf') format('truetype'),
  url('#{$sansSourceProPath}/sourcesanspro-bold-webfont.svg#sourcesanspro-bold') format('svg'); // EDITED
  font-weight: 700; // EDITED
  font-style: normal;
}

私のmain.scssファイルでは、次のhtmlようにタグ内でデフォルトのフォントを宣言しました。

html {
  font-size: $font-default-size; // 16px
  font-family: $default-font-family; // 'Source Sans Pro'
  font-weight: 300; // EDITED
}

テスト ページで使用する要素には、次の CSS クラスがあります。

.menu__header {
    font-size: 1.2em;
    font-weight: 400; // EDITED
    font-style: normal;
    text-transform: uppercase;
}

どういうわけか、最新Google Chrome 30ではLightとBoldフォントのみが読み込まれます (要求されます)。必要な通常のフォントは要求もロードもされません ( Boldフォントを使用する要素を宣言しておらず、Lightフォントのみが表示されているため、混乱します)...

私は何か間違ったことをしていますか？

コードを更新して、これ以上混乱しないようにしました-それでも、ライトフォントとボールドフォントのみをロードし、レギュラーフォントはロードしません...

4

1 に答える 1

1

ライトはありfont-weight: 300ません200(200 は余分なライトです)。ライト フォントを通常の font-weight に、通常のフォントを太字などに割り当てているのはなぜですか? 長期的には、すべてをより混乱させるだけです。

</head>このすべてをスキップして、終了タグの前にこれを追加するだけです。

<link href='http://fonts.googleapis.com/css family=Source+Sans+Pro:300,400,700' rel='stylesheet' type='text/css'>

あなたの問題はおそらく、ライトフェイスを通常、通常を太字などに割り当てることに関係しています。特に、svgエイリアスにその変更を加えていないことを考えると、変数の使用方法を本質的に混同していることを意味します. 「通常の」フォントの太さに軽いフォントの太さとfont-faceを使用する場合（太字には通常のフォントなど）、すべての変数で一貫してこれを行う必要があります...しかし、実際には通常の方法で行う必要があります方法 (レギュラーはレギュラー、ライトはライト、ボールドはボールド)。

于 2013-11-12T15:23:43.837 に答える