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