字体不会加载所有字体

Question

我对@ font-face有一个css问题。 这是我的剧本：

@font-face {
    font-family: 'Atlas Grotesk';
    src: url('fonts/hinted-AtlasGrotesk-Thin.eot');
    src: url('fonts/hinted-AtlasGrotesk-Thin.eot?#iefix') format('embedded-opentype'),
    url('fonts/hinted-AtlasGrotesk-Thin.woff2') format('woff2'), 
    url('fonts/hinted-AtlasGrotesk-Thin.woff') format('woff'), 
    url('fonts/hinted-AtlasGrotesk-Thin.ttf') format('truetype'), 
    url('fonts/hinted-AtlasGrotesk-Thin.svg#AtlasGrotesk-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Atlas Grotesk';
    src: url('fonts/hinted-AtlasGrotesk-Bold.eot');
    src: url('fonts/hinted-AtlasGrotesk-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/hinted-AtlasGrotesk-Bold.woff2') format('woff2'), url('fonts/hinted-AtlasGrotesk-Bold.woff') format('woff'), url('fonts/hinted-AtlasGrotesk-Bold.ttf') format('truetype'), url('fonts/hinted-AtlasGrotesk-Bold.svg#AtlasGrotesk-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Atlas Grotesk';
    src: url('fonts/hinted-AtlasGrotesk-Regular.eot');
    src: url('fonts/hinted-AtlasGrotesk-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/hinted-AtlasGrotesk-Regular.woff2') format('woff2'), url('fonts/hinted-AtlasGrotesk-Regular.woff') format('woff'), url('fonts/hinted-AtlasGrotesk-Regular.ttf') format('truetype'), url('fonts/hinted-AtlasGrotesk-Regular.svg#AtlasGrotesk-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

我的问题是，当我查看我的网络debuger时，它只是加载常规字体。所以，我不能使用超薄或粗体字。

环境：gulp.js，sass。

你有什么想法吗？

非常感谢您的帮助] 1

Answer 1

名字是一样的，这就是问题所在。做类似的事情：

@font-face {
    font-family: 'Atlas-Grotesk-Thin';
    src: url('fonts/hinted-AtlasGrotesk-Thin.eot');
    src: url('fonts/hinted-AtlasGrotesk-Thin.eot?#iefix') format('embedded-opentype'),
    url('fonts/hinted-AtlasGrotesk-Thin.woff2') format('woff2'), 
    url('fonts/hinted-AtlasGrotesk-Thin.woff') format('woff'), 
    url('fonts/hinted-AtlasGrotesk-Thin.ttf') format('truetype'), 
    url('fonts/hinted-AtlasGrotesk-Thin.svg#AtlasGrotesk-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Atlas-Grotesk-Bold';
    src: url('fonts/hinted-AtlasGrotesk-Bold.eot');
    src: url('fonts/hinted-AtlasGrotesk-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/hinted-AtlasGrotesk-Bold.woff2') format('woff2'), url('fonts/hinted-AtlasGrotesk-Bold.woff') format('woff'), url('fonts/hinted-AtlasGrotesk-Bold.ttf') format('truetype'), url('fonts/hinted-AtlasGrotesk-Bold.svg#AtlasGrotesk-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Atlas-Grotesk-Regular';
    src: url('fonts/hinted-AtlasGrotesk-Regular.eot');
    src: url('fonts/hinted-AtlasGrotesk-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/hinted-AtlasGrotesk-Regular.woff2') format('woff2'), url('fonts/hinted-AtlasGrotesk-Regular.woff') format('woff'), url('fonts/hinted-AtlasGrotesk-Regular.ttf') format('truetype'), url('fonts/hinted-AtlasGrotesk-Regular.svg#AtlasGrotesk-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Answer 2

你如何在CSS中的其他地方调用字体？您的@font-face规则看起来是正确的。浏览器只会在解析CSS后下载所需的字体文件。如果您要使用以下样式规则，则将下载所有字体权重：

h1 {
  font-family: 'Atlas Grotesk';
  font-weight: bold;
}

p {
  font-family: 'Atlas Grotesk';
  font-weight: normal;
}

.heading {
  font-family: 'Atlas Grotesk';
  font-weight: 100;
}

听起来您可能设置了一个全局字体粗细，例如100，这会阻止设置其他字体粗细。在这种情况下，其他上下文可能会有所帮助。

Answer 3

是，您的代码是正确的，但是，您应确认页面上使用了您的font-family（Rubik）。 （如果页面上未使用您的字体系列，浏览器将不会加载它们）