@ font-face: Использовать только одно семейство шрифтов с разными весами шрифтов?

Question

Я использую шрифт "Open Sans" для сайта, над которым я работаю. Прямо сейчас я использую Google Web Fonts для его загрузки, но я понял, что это не самый надежный способ, когда он случайным образом начал использовать версию bold 700 вместо обычной 400 (вы можете проверить самостоятельно в http://www.google.com/webfonts/specimen/Open+Sans). В любом случае, Я хотел бы перейти на @ font-face и разместить шрифт самостоятельно, однако есть кое-что, чего я не понимаю. С помощью веб-шрифтов Google я могу использовать одно и то же семейство шрифтов для всех различных весов, поэтому я просто это правило для элемента body:

семейство шрифтов: 'Open Sans', без засечек;

и различный вес шрифта для определенных элементов в зависимости от того, должен ли он быть светлым, обычным или жирным. Но с @ font-face, сгенерированными Font Squirrel, кажется, что вы должны указывать разные семейства шрифтов для каждого различного веса, такие как «OpenSansLight», «OpenSansRegular» и т. Д. Почему это так? И есть ли способ изменить это, чтобы мне не пришлось менять весь мой CSS?

Спасибо.

Answer 1

Когда мы загружаем шрифты Google через cdn, он в основном загружает все выбранные параметры шрифта (светлее, полужирный, лишний полужирный)

Как вы можете видеть весь шрифтдля "исходного кода Pro" шрифт загружен.

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

Вот почему хорошо загружать файлы по отдельности.Но вместо загрузки его под названиями «OpenSans Regular», «OpenSans Bold», например.Вы можете использовать «Open Sans» и назначать разные веса шрифтов.(но загружайте соответствующие файлы с соответствующими шрифтами).

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Code Pro Font'),
       url('/fonts/sourcepro.woff2') format('woff2'), 
       url('/fonts/sourcepro.woff') format('woff'),
       url('/fonts/sourcepro.ttf') format('ttf'),
       url('/fonts/sourcepro.eot') format('eot');
}

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 800;
  src: local('Source Code Pro bold'),
       url('/fonts/source-b.woff2') format('woff2'), 
       url('/fonts/source-b.woff') format('woff'),
       url('/fonts/source-b.ttf') format('ttf'),
       url('/fonts/source-b.eot') format('eot');
}