2

我SASS与版本3.2.9 (Media Mark)一起使用，我想将我的自定义font-family与Source Sans Pro字体的 3 种变体（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字体被加载（请求）。既没有请求也没有加载所需的常规字体（这让我感到困惑，因为我没有声明任何元素使用粗体字体，而且只显示了浅字体）......

难道我做错了什么？

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

4

1 回答 1

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 别名进行更改，这意味着您基本上混淆了使用变量的方式. 如果您要使用 light font-weight 和 font-face 作为“正常”字体粗细（以及常规用于粗体等），您需要在所有变量中始终如一地执行此操作......但实际上您应该正常执行方式（常规是常规，浅色是浅色，粗体是粗体）。

于 2013-11-12T15:23:43.837 回答