Используйте несколько правил @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 использовать другой шрифт. Как я могу это сделать?

2 ответов


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

пользовательский веб-шрифт не работает в 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 does-это указание браузеру загрузить и сделать доступным семейство шрифтов. Смотри: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; }