Використовуйте декілька правил @ font-face у CSS

Як я можу використовувати більше, ніж @font-faceправило, у своєму CSS?

Я вставив це у свою таблицю стилів:

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

@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');
}

Наразі це стосується лише всього тексту на сайті. Але я хотів би вказати h1використання іншого шрифту. Як я можу це зробити?

Зверніть увагу, що вас також може зацікавити:

Спеціальний веб-шрифт не працює в 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;
}

І Ваші подальші запитання:

З. Я хотів би використовувати шрифт, такий як "Джміль", наприклад. Як я можу використовувати @font-faceцей шрифт на комп'ютері користувача?

Зауважте, що я не знаю, як називається ваш шрифт або файл Bumble Bee, тому налаштуйте відповідно, і декларація шрифту повинна передувати (прийти раніше) вашому використанню, як я вже показав вище.

З: Чи можу я все-таки використовувати інший @font-faceшрифт "GestaRegular"? Чи можу я використовувати обидва в одній таблиці стилів?

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

@font-face {
    font-family: Kaffeesatz;
    src: url(YanoneKaffeesatz-Thin.otf);
    font-weight: 200;
}
@font-face {
    font-family: Kaffeesatz;
    src: url(YanoneKaffeesatz-Light.otf);
    font-weight: 300;
}
@font-face {
    font-family: Kaffeesatz;
    src: url(YanoneKaffeesatz-Regular.otf);
    font-weight: normal;
}
@font-face {
    font-family: Kaffeesatz;
    src: url(YanoneKaffeesatz-Bold.otf);
    font-weight: bold;
}
h3, h4, h5, h6 {
    font-size:2em;
    margin:0;
    padding:0;
    font-family:Kaffeesatz;
    font-weight:normal;
}
h6 { font-weight:200; }
h5 { font-weight:300; }
h4 { font-weight:normal; }
h3 { font-weight:bold; }

Кілька варіацій сімейства шрифтів можна оголосити, змінивши властивість font-weight і src правила @ font-face.

/* Regular Weight */
@font-face {
    font-family: Montserrat;
    src: url("../fonts/Montserrat-Regular.ttf");
}

/* SemiBold (600) Weight */
@font-face {
    font-family: Montserrat;
    src: url("../fonts/Montserrat-SemiBold.ttf");
    font-weight: 600;
}

/* Bold Weight */
@font-face {
    font-family: Montserrat;
    src: url("../fonts/Montserrat-Bold.ttf");
    font-weight: bold;
}

Задекларовані правила можна використовувати, дотримуючись

/* Regular */
font-family: Montserrat;


/* Semi Bold */
font-family: Montserrat;
font-weght: 600;

/* Bold */
font-family: Montserrat;
font-weight: bold;