Использовать несколько правил @font-face в CSS

Ответ 1

Примечание, вас также может заинтересовать:

Пользовательский веб-шрифт не работает в IE9

Что включает в себя более описательную разбивку CSS, которую вы видите ниже (и объясняет настройки, которые улучшают работу IE6-9).

@font-face {
  font-family: 'Bumble Bee';
  src: url('bumblebee-webfont.eot');
  src: local('☺'), 
       url('bumblebee-webfont.woff') format('woff'), 
       url('bumblebee-webfont.ttf') format('truetype'), 
       url('bumblebee-webfont.svg#webfontg8dbVmxj') format('svg');
}

@font-face {
  font-family: 'GestaReFogular';
  src: url('gestareg-webfont.eot');
  src: local('☺'), 
       url('gestareg-webfont.woff') format('woff'), 
       url('gestareg-webfont.ttf') format('truetype'), 
       url('gestareg-webfont.svg#webfontg8dbVmxj') format('svg');
}

body {
  background: #fff url(../images/body-bg-corporate.gif) repeat-x;
  padding-bottom: 10px;
  font-family: 'GestaRegular', Arial, Helvetica, sans-serif;
}

h1 {
  font-family: "Bumble Bee", "Times New Roman", Georgia, Serif;
}

И ваши последующие вопросы:

Q. Я бы хотел использовать шрифт, например, "Bumble bee". Как я могу использовать @font-face, чтобы сделать этот шрифт доступным для пользователя компьютер?

Обратите внимание, что я не знаю, что такое имя вашего шрифта Bumble Bee или файл, поэтому соответствующим образом скорректируйте его, и что объявление шрифта должно предшествовать (прежде чем) использовать его, как я показал выше.

Q. Могу ли я использовать другой шрифт @font-face "GestaRegular"? Могу ли я использовать оба в той же таблице стилей?

Просто перечислите их вместе, как я показал в моем примере. Нет причин, по которым вы не можете объявить оба. Все, что делает @font-face, указывает браузеру на загрузку и делает доступным семейство шрифтов. См.: http://iliadraznin.com/2009/07/css3-font-face-multiple-weights