Подключение нескольких стилей одного шрифта в разных файлах
На входе у нас имеется один шрифт, но его стиливое начертание font-style:normal|italic
или ширина font-wieght:normal|bold
созданы в отдельных файлах.
Наша задача подключить этот шрифт весь и правильно.
Складываем все начертания в одну папку для удобства.
А дальше привожу пример, из которого все станет ясно:
@font-face {
font-family: "MyriadPro";
src: url("../fonts/MyriadProCondRegular.eot");
src: url("../fonts/MyriadProCondRegular.eot?#iefix") format("embedded-opentype"),
url("../fonts/MyriadProCondRegular.woff") format("woff"),
url("../fonts/MyriadProCondRegular.ttf") format("truetype"),
url("../fonts/MyriadProCondRegular.otf") format("opentype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "MyriadPro";
src: url("../fonts/MyriadProCondItalic.eot");
src: url("../fonts/MyriadProCondItalic.eot?#iefix") format("embedded-opentype"),
url("../fonts/MyriadProCondItalic.woff") format("woff"),
url("../fonts/MyriadProCondItalic.ttf") format("truetype"),
url("../fonts/MyriadProCondItalic.otf") format("opentype");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "MyriadPro";
src: url("../fonts/MyriadProCondBold.eot");
src: url("../fonts/MyriadProCondBold.eot?#iefix") format("embedded-opentype"),
url("../fonts/MyriadProCondBold.woff") format("woff"),
url("../fonts/MyriadProCondBold.ttf") format("truetype"),
url("../fonts/MyriadProCondBold.otf") format("opentype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "MyriadPro";
src: url("../fonts/MyriadProCondBoldItalic.eot");
src: url("../fonts/MyriadProCondBoldItalic.eot?#iefix") format("embedded-opentype"),
url("../fonts/MyriadProCondBoldItalic.woff") format("woff"),
url("../fonts/MyriadProCondBoldItalic.ttf") format("truetype"),
url("../fonts/MyriadProCondBoldItalic.otf") format("opentype");
font-weight: bold;
font-style: italic;
}
Структура файлов у меня для примера:
/css/файлы_стилей
/fonts/файлы_шрифтов
Заметили ошибку, можете подсказать еще что-то? - Обращаемся сюда