1

У меня есть шрифт ttf, который разделен на отдельные файлы. Жирный шрифт в отдельном файле, курсив в отдельном и так далее. Пробовал подключать все файлы и у каждого шрифта задавать парамтеры. Но когда у элемента указываешь font-family: 'Мойшрифт', sans-serif; font-weight: 400 то грузится почему-то тот который указан последним в

@font-face {
  font-family: 'Мойшрифт';
  src: url('fonts/Мойшрифт-Regular.ttf'); 
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'Мойшрифт';
  src: url('fonts/Мойшрифт-Bold.ttf'); 
  font-style: normal;
  font-weight: 800;
}

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

1 ответ 1

3

Нет, всё должно работать. У гугла же работает:

<link href="//fonts.googleapis.com/css?family=Lato:100,400,900" rel="stylesheet">

<div style="font-size: 2em">
  <p style="font-family: Lato; font-weight: 100;">Just a bit of text.</p>
  <p style="font-family: Lato; font-weight: 400;">Just a bit of text.</p>
  <p style="font-family: Lato; font-weight: 900;">Just a bit of text.</p>
</div>

Или в развёрнутом варианте с содержимым файла:

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  src: local('Lato Hairline'), local('Lato-Hairline'), url(https://fonts.gstatic.com/s/lato/v11/eFRpvGLEW31oiexbYNx7Y_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  src: local('Lato Hairline'), local('Lato-Hairline'), url(https://fonts.gstatic.com/s/lato/v11/GtRkRNTnri0g82CjKnEB0Q.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/UyBMtLsHKBKXelqf4x7VRQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: local('Lato Black'), local('Lato-Black'), url(https://fonts.gstatic.com/s/lato/v11/R4a6fty3waPci7C44H8AjvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: local('Lato Black'), local('Lato-Black'), url(https://fonts.gstatic.com/s/lato/v11/tI4j516nok_GrVf4dhunkg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
<div style="font-size: 2em">
  <p style="font-family: Lato; font-weight: 100;">Just a bit of text.</p>
  <p style="font-family: Lato; font-weight: 400;">Just a bit of text.</p>
  <p style="font-family: Lato; font-weight: 900;">Just a bit of text.</p>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.