CSS (SASS) @font面:在字体系列中声明了 3 种字体，仅加载了 2 种

我将SASS与版本3.2.9 (Media Mark)一起使用，我想将我的自定义font-family与 Source Sans Pro 字体的 3 种变体（浅色、常规、粗体）一起使用。

这是我_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 font-weight: 300不是 200（200 是额外的 light）。为什么要将浅色字体分配给常规字体粗细，将常规字体分配给粗体等？从长远来看，这只会让一切变得更加混乱。

您可以跳过所有这些，只需在结束</head>标记之前添加以下内容：

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

您的问题可能与将浅色面分配为规则、常规为粗体等有关，特别是考虑到您没有对 svg 别名进行更改，这意味着您基本上混淆了使用变量的方式。如果您打算使用轻字体粗细和字体作为"正常"字体粗细（以及常规粗体等），则需要在所有变量中一致地执行此操作......但实际上你应该以正常的方式去做（常规是规则的，轻的就是轻的，粗体是粗体）。

相关内容

最新更新

热门标签：