Веб-шрифты: как указать вес, не меняя семейство шрифтов?

Веб-шрифты для разных весов находятся в разных файлах и, следовательно, обычно отображаются как разные font-family:

@font-face {
 font-family: 'LatoWeb'; 
 src: url('/fonts/blog/Lato-Regular.eot');
 src: url('/fonts/blog/Lato-Regular.eot?#iefix') format('embedded-opentype'),
      url('/fonts/blog/Lato-Regular.woff2') format('woff2'),
      url('/fonts/blog/Lato-Regular.woff') format('woff'),
      url('/fonts/blog/Lato-Regular.ttf') format('truetype');
 font-style: normal;
 font-weight: normal;
 text-rendering: optimizeLegibility;
}


@font-face {
 font-family: 'LatoWebSemibold';
 src: url('/fonts/blog/Lato-SemiboldItalic.eot');
 src: url('/fonts/blog/Lato-SemiboldItalic.eot?#iefix') format('embedded-opentype'),
      url('/fonts/blog/Lato-SemiboldItalic.woff2') format('woff2'),
      url('/fonts/blog/Lato-SemiboldItalic.woff') format('woff'),
      url('/fonts/blog/Lato-SemiboldItalic.ttf') format('truetype');
 font-style: italic;
 font-weight: normal;
 text-rendering: optimizeLegibility;
}

Для невеб-шрифтов я могу указать font-weight: 400 или font-weight: 200 и использовать более тяжелую или более легкую версию шрифта.

Однако с веб-шрифтами кажется, что мне придется изменить font-family, а также font-weight, чтобы изменить толщину шрифта.

Можно ли использовать разные версии одного и того же font-family, просто указав font-weight?

Или это невозможно, и сайты, использующие веб-шрифты, меняют семейство шрифтов каждый раз, когда меняют вес?


css typography webfonts
person mikemaccana    schedule 29.01.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вам не нужно менять семейство шрифтов. На самом деле вы сохраняете семейство шрифтов прежним и просто меняете значения для font-style и font-weight. Имейте в виду, что сначала следует упомянуть стандартный шрифт, так как это препятствует тому, чтобы некоторые браузеры плохо распознавали ваши определения:

@font-face {
 font-family: 'LatoWeb'; 
 src: url('/fonts/blog/Lato-Regular.eot');
 src: url('/fonts/blog/Lato-Regular.eot?#iefix') format('embedded-opentype'),
      url('/fonts/blog/Lato-Regular.woff2') format('woff2'),
      url('/fonts/blog/Lato-Regular.woff') format('woff'),
      url('/fonts/blog/Lato-Regular.ttf') format('truetype');
 text-rendering: optimizeLegibility;
}

@font-face {
 font-family: 'LatoWeb';
 src: url('/fonts/blog/Lato-SemiboldItalic.eot');
 src: url('/fonts/blog/Lato-SemiboldItalic.eot?#iefix') format('embedded-    opentype'),
      url('/fonts/blog/Lato-SemiboldItalic.woff2') format('woff2'),
      url('/fonts/blog/Lato-SemiboldItalic.woff') format('woff'),
      url('/fonts/blog/Lato-SemiboldItalic.ttf') format('truetype');
 font-style: italic;
 font-weight: normal; /* for a semibold typo, you might want to set a different value */
 text-rendering: optimizeLegibility;
}

Таким образом, вы можете ссылаться на шрифт, например:

.my-font-element {
  font-family: 'LatoWeb';
}
.my-font-element .italic {
  font-style: italic;
}
person Mario Steinitz    schedule 29.01.2016
comment
Убедитесь, что вы определили стили в своем @font-face так же, как и при использовании шрифта. Итак, если у вас есть класс CSS, использующий font-weight: 600; font-style: normal; вам нужно определить шрифт, который имеет эти значения. - person Mario Steinitz; 29.01.2016

arrow_upward
0
arrow_downward

При изменении font-family вам не нужно также указывать font-weight или font-style. Вместо этого вы можете объявить классы для каждого используемого варианта шрифта.

Например:

.lato-web {
  font-family: 'LatoWeb';
}

.lato-web-semibold {
  font-family: 'LatoWebSemibold';
}

Кроме того, текст в веб-шрифте, которому принудительно присвоена другая насыщенность с помощью font-weight, может не отображаться так же хорошо, как текст, оставленный с исходной жирностью.

person twernt    schedule 29.01.2016