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

Question

Веб-шрифты для разных весов находятся в разных файлах, и, следовательно, как правило, появляются в другой 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?

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

Answer 1

Вам не нужно менять семейство шрифтов. На самом деле вы сохраняете семейство шрифтов одинаковыми и просто изменяете значения для 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; 
} 

Answer 2

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

Например:

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

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

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