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

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

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

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

Спасибо.


fonts google-webfonts font-face font-family
person Benoit Rouleau    schedule 12.11.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

введите описание изображения здесь

Как видите, загружен весь вес шрифта для шрифта "source code pro".

При загрузке шрифта из гугла. Он предоставляет разные файлы для всех выбранных параметров. Это может уменьшить загрузку нежелательных шрифтов (если 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');
}

person Alok Pant    schedule 27.02.2015