字体不加载所有字体

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;
}

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

环境：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

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

字体不加载所有字体

Font face doesn't load all fonts

css

fonts

sass

font-face