Лицо шрифта загружает не все шрифты - PullRequest
Новая
       22

Лицо шрифта загружает не все шрифты

0 голосов
/ 22 мая 2018

У меня проблема CSS с @ font-face.Вот мой сценарий: 

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

Моя проблема в том, что когда я смотрю на мой сетевой отладчик, он просто загружает обычный шрифт.Поэтому я не могу использовать тонкие или жирные шрифты.

environment: gulp.js, sass.

У вас есть идея?

Большое вам спасибо за вашпомощь ![enter image description here] 1

Ответы [ 3 ]

0 голосов
/ 22 мая 2018

Как вы называете шрифт в другом месте вашего 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, который мешает другимвеса шрифта из установленного.В этом случае может быть полезен дополнительный контекст.

0 голосов
/ 09 августа 2019

да, код правильный, но вы должны подтвердить, что на странице используется ваше семейство шрифтов (Rubik).(если ваше семейство шрифтов не используется на странице, браузер их не загрузит)

0 голосов
/ 22 мая 2018

Имена совпадают, вот в чем проблема.Сделайте что-то вроде: 

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