Привет, друзья! Ранее использовал ссылку на вебфонты от гугла, но сейчас решил попробовать иначе.
Скачал этот WebFontKit
и подключил к проекту.
Вот рендер из хрома
А вот их Firefox
OS X 10.10
Я понимаю, что это нормально, но может есть грязный хак чтобы жирный шрифт был в ФФ как в хроме?
А то в макете всё выглядит миленько, а как в фф смотришь на жирноту, то плохеет мне)
А вы точно скачали все варианты шрифта? Для внешних шрифтов нужно подключить как минимум 4 варианта: regular, bold, italic, bold italic. Иначе жирность и курсив будет сделан инструментами браузера, что далеко не всегда корректно.
Денис Инешин: спасибо, вы навели меня на правую мысль. Я вообще не во что не оборачивал.
в font.css я объявил
@font-face {
font-family: 'robotobold';
src: url('Roboto-Bold-webfont.eot');
src: url('Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-Bold-webfont.woff') format('woff'),
url('Roboto-Bold-webfont.ttf') format('truetype'),
url('Roboto-Bold-webfont.svg#robotobold') format('svg');
font-weight: normal;
font-style: normal;
}
и думал, что в style.css будет достаточно
b {
line-height: 20px;
font-family: 'robotobold', sans-serif;
color: #336699;
}
Добавил font-weight: normal; и все стало нормально.
Спасибо, получил Level Up.
Что за дурацкая привычка так шрифты подключать. Ведь не зря же в fon-face усть два параметра bold и italic!
@font-face {
font-family: 'Roboto';/* обращаем сюда свой внимание */
src: url('Roboto-Bold-webfont.eot'); /* ... */
font-weight: bold; /* обращаем сюда свой внимание */
font-style: normal;
}
@font-face {
font-family: 'Roboto';/* обращаем сюда свой внимание */
src: url('Roboto-webfont.eot'); /* ... */
font-weight: normal; /* обращаем сюда свой внимание */
font-style: normal;
}
и так далее для все вариантов
А уже в CSS привычно работаем как с обычным шрифтом.
b {
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
Простой
Средний
