Font Squirrel после конвертирования шрифтов создает CSS файл, в котором все начертания одной и той же гарнитуры представлены в виде совершенно разных гарнитур. Рассмотрим в качестве примера PT Sans.
@font-face {
font-family: 'PTSansRegular';
src: url('PTS55F-webfont.eot');
src: url('PTS55F-webfont.eot?#iefix') format('embedded-opentype'),
url('PTS55F-webfont.woff') format('woff'),
url('PTS55F-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PTSansItalic';
src: url('PTS56F-webfont.eot');
src: url('PTS56F-webfont.eot?#iefix') format('embedded-opentype'),
url('PTS56F-webfont.woff') format('woff'),
url('PTS56F-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PTSansBold';
src: url('PTS75F-webfont.eot');
src: url('PTS75F-webfont.eot?#iefix') format('embedded-opentype'),
url('PTS75F-webfont.woff') format('woff'),
url('PTS75F-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PTSansBoldItalic';
src: url('PTS76F-webfont.eot');
src: url('PTS76F-webfont.eot?#iefix') format('embedded-opentype'),
url('PTS76F-webfont.woff') format('woff'),
url('PTS76F-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Когда используется такой шрифт в сочетании с модификаторами начертаний font-weight
и font-style
, то браузер автоматически пытается «сделать» шрифт полужирным или наклонным не обращая внимания, что для этого есть специально созданные начертания.
h1, h2, h3 { font-family: PTSansBold, Arial, sans-serif; }
Если такой шрифт подключается только для заголовков, где применяется, как правило, только полужирное начертание, то для альтернативных гарнитур полужирного начертания уже не будет!
Чтобы с начертаниями был полный порядок нужно поправить описания шрифтов.
@font-face {
font-family: 'PTSansWeb';
src: url('PTS55F-webfont.eot');
src: url('PTS55F-webfont.eot?#iefix') format('embedded-opentype'),
url('PTS55F-webfont.woff') format('woff'),
url('PTS55F-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PTSansWeb';
src: url('PTS56F-webfont.eot');
src: url('PTS56F-webfont.eot?#iefix') format('embedded-opentype'),
url('PTS56F-webfont.woff') format('woff'),
url('PTS56F-webfont.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'PTSansWeb';
src: url('PTS75F-webfont.eot');
src: url('PTS75F-webfont.eot?#iefix') format('embedded-opentype'),
url('PTS75F-webfont.woff') format('woff'),
url('PTS75F-webfont.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'PTSansWeb';
src: url('PTS76F-webfont.eot');
src: url('PTS76F-webfont.eot?#iefix') format('embedded-opentype'),
url('PTS76F-webfont.woff') format('woff'),
url('PTS76F-webfont.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
Для начала указываем всем начертаниям одно и тоже имя.
Конкретно в этом примере я выбрал PTSansWeb . Я намеренно отказался от оригинального имени для демонстрации подключения требуемого шрифта, а не какого-то другого. Разумеется в продакшине, если есть шанс, что гарнитура уже установлена у пользователя в системе, то его не стоит упускать. По этому для популярных шрифтов важно сохранять исходное название семейства шрифтов («PT Sans», в моём случае).
Затем в модификаторах начертания указываем значения, которые реально соответствуют начертанию каждого файла.
Всё это позволит браузеру выбирать нужное начертание шрифта как это происходит для обычных шрифтов, установленных в системе пользователя.
Коментарии к заметке
Вообще-то fontsquirrel умеет сам так делать. Для этого нужно: — Выбрать режим «Expert» — В разделе «CSS» отметить чекбокс «Style Link» (Family Support in CSS)
Получаем искомый результат.
Вроде это наоборот хорошо, шрифт не будет грузиться. Или нет?
Совершенно верно. Если в начертаниях правильно выставлены параметры (а это скорее всего так и есть), то с этой опцией правильное описание шрифта сформируются само.
В моей практике однажды потребовалось комбинировать начертания разных гарнитуры. Тут я как раз и воспользовался описанным приёмом.
В примере, как мне показалось, важно было продемонстрировать именно загрузку внешних шрифтов. Разумеется, если есть шанс, что гарнитура установлена локально, то его не стоит упускать.
Не очень понятно, как это работает. У нас есть загружаемый шрифт, допустим курсивный. Если для него написать font-style: italic; то браузер попытается сделать уже изначально курсивный шрифт еще более курсивным и получится ерунда.
А в вашем примере вообще магия творится, мы называем все шрифты одним и тем же именем, так каким образом браузер разберется, какой из них использовать в каждом конкретном случае? Тем более шрифт в итоге все-равно будет испорчен стилями font-style: italic и font-weight: bold.
Заранее прошу прощения, если вопросы глупые )
В этом весь фокус и заключается, что в
@font-face
идет описание начертаний, а не их использование (хотя, вроде бы встречаются те же самыеfont-weight
иfont-style
). Мы только указываем, что для полужирного или наклонного начертания нужно использовать такой-то файл.Что касается использования не полного комплекта начертаний, то может произойти такая забавная ситуация, когда, например, не определено обычное начертание.
Весь параграф стал полужирным. Для сравнения полужирным выделен зелёный фрагмент, жёлтый фрагмент размечен как обычный наклонный, а сиреневым — полужирный наклонный.
Подозреваю, что браузер в данном случае не пытается использовать альтернативные гарнитуры, а находит первое подходящее начертание. Когда никакого подходящего начертания не будет найдено, он начнёт сам обжирнять и наклонять буквы. Такое поведение повторяется всеми браузерами.
Т.е. такой принцип лучше использовать только с полным комплектом гарнитур (обычный, курсивный, жирный, курсивный жирный), чтобы гарантировать, что браузер сможет сделать все правильно?
Спасибо, очень интересная информация. Нужно будет поэкспериментировать.
Не обязательно. Главное понимать где будет использоваться шрифт. Если это «user generated content», то лучше предусмотреть все варианты. Когда шрифт используется только для заголовков, то достаточно одного какого-то начертания.
Хорошее замечание. Только я бы советовал для вариантов «user generated content» как можно больше ограничить написание начертаний. Например как тут в написании комментариев — все хорошо и чисто выглядит когда начертание одно.
Зачем заставлять пользователя грузить гарнитуру, которая у него уже установлена? Так можно и Arial, Tahoma и Verdana подгрузить на всякий случай.
Вадим, я умышленно изменил имя шрифта в этом примере. Тут важно было показать, что используется именно сконвертированный шрифт, а не тот, который установлен в системе. Добавил в статью ремарку о том, что в продакшине нужно всё же использовать оригинальное имя.
В IE8 я не смог заставить работать одно семейство. Пришлось разделять. А при использовании препроцессоров css сделать mixin типа ff(bold,1em,1.4em) нет никаких проблем.
Игорь, даже не представляю, что помешало ему корректно использовать одно семейство. Возможно, это был какой-то внутренний дефект шрифта или конвертера.
Update: Глюки с разными начертаниями в IE появляются только в режиме эмуляции, когда IE10 (может быть и 9) прикидывается IE7 или IE8. Пробовал открывать те же страницы настоящим браузером IE8 и никаких проблем не заметил (эмуляция IE7 тоже хорошо в нём работала).
Я так понимаю, миксин будет конструировать имя гарнитуры исходя из переданного ему стиля. Хорошо. Но миксин не решит проблему с фолбеком на системные шрифты. Предположим, что кастомный шрифт представляет собой полужирное начертание. Если он не смог отобразиться, то браузер нарисует надпись системным шрифтом, но с обычным начертанием, а не полужирным. В этом вся беда и заключается.
Спасибо большое за эту заметку! Вроде бы простая вещь, но очень полезно!