html - CSS (SASS) @font-face : Declared 3 fonts within font-family, 仅加载 2 个

Question

我使用版本 3.2.9 (Media Mark) 的 SASS 并且我想使用我的自定义 font-family 的 3 个变体Source Sans Pro 字体(Light、Regular、Bold)。

这是我的_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 字体。所需的 Regular 字体既没有请求也没有加载(这让我很困惑，因为我没有声明任何元素使用 Bold 字体，也只有 Light 显示字体)...

我做错了什么吗？

我更新了代码，这样它就不再那么困惑了 - 它仍然只加载 Light 和 Bold 字体，从不加载 Regular字体...

Answer 1

光是 font-weight: 300不是 200 (200 是额外的光)。为什么要将浅字体分配给常规字体粗细，将常规字体分配给粗体等？从长远来看，这只会让一切变得更加困惑。

您可以跳过所有这些，只需在结束前添加即可 </head>标签:

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

您的问题可能与将浅色面指定为常规、常规为粗体等有关，特别是考虑到您没有对 svg 别名进行更改，这意味着您实际上是在混淆自己的方式使用变量。如果你打算使用轻字体和字体作为你的“正常”字体重量(和粗体等常规)你需要在所有变量上一致地这样做......但实际上你应该只是正常地做方式(regular就是regular，light就是light，bold就是bold)。