Почему бы не определить шрифт или шрифт в шрифте @font-face, Font Squirrel?

Когда мы определяем стили @font-face, мы можем определить, являются ли ссылочные файлы выделенными жирным шрифтом, курсивом или полужирным шрифтом курсивом шрифта, как описано в этом вопросе SO:

Как добавить несколько файлов шрифтов для одного и того же шрифта?

Пример:

@font-face {
    font-family: 'FontinSans';
    src: local('☺'), url('fontin_sans_regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FontinSans';
    src: local('☺'), url('fontin_sans_bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

Однако Font Squirrel не создает @font-face комплекты таким образом. Вместо этого они делают что-то вроде этого:

@font-face {
    font-family: 'FontinSans';
    src: local('☺'), url('fontin_sans_regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FontinSansBold';
    src: local('☺'), url('fontin_sans_bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Это означает, что в наших файлах CSS мы должны делать такие вещи:

h2 {
    font-family: 'FontinSansBold', Verdana, sans-serif;
    font-weight: normal;
}

Почему Font Squirrel не использует выражения font-weight и font-style для выделения жирных и курсивных вариантов? Зачем использовать отдельное семейство шрифтов? Знают ли они что-то о (отсутствии) поддержки этой функции в каком-то браузере?

Ответы

Ответ 1

По умолчанию, Font-Squirrel делает это, чтобы увеличить поддержку с помощью пользовательских агентов, которые не соответствуют спецификации (те, которые игнорируют font-weight и font-style).

Если вам не нравятся эти устаревшие пользовательские агенты, вы можете включить опцию "Связывание стилей", которая доступна в разделе эксперта генератора набора @font-face. Обратите внимание, что IE8 и ниже игнорируют нумерованные значения font-weight и поддерживают только normal и bold (и соответствующие значения веса 400, 700).

Ответ 2

Это связано с тем, чтобы выталкивать внутри шрифта, чтобы определить, когда шрифт выделен жирным шрифтом или курсивом. И некоторые биты должны быть установлены внутри шрифта, чтобы IE забирал ссылку на стиль. У большинства жирных/курсивых шрифтов эти биты установлены, но не все. Мы работаем над тем, чтобы сделать это более автоматическим.

Ответ 3

Кажется, Internet Explorer 8 может быть одним из тех "старых" пользовательских агентов, который не поддерживает шрифт и шрифт

Я пытаюсь сделать полужирный/курсив/bolditalic с использованием шрифта @font-face и font-family.

Мои попытки до сих пор ничего не дали. Вот страница, демонстрирующая проблему.

http://clearimageonline.com/apps/playground/fonts/test_IE.html

Кто-нибудь здесь столкнулся с этим и имеет решение, которое работает с IE8?

Я искал и пробовал большую часть этой недели для ответа на этот вопрос. Похоже, IE8 не позволит мне это сделать.

Вот предлагаемое обходное решение (очень уродливое обходное решение)....

http://clearimageonline.com/apps/playground/fonts/proposed_IE.html

Эти тестовые страницы предназначены только для Internet Explorer. Этот тест ограничен IE. Функция Cross Browser будет очевидной частью окончательного решения.

Ответ 4

Проблема с использованием подхода FontSquirrel по умолчанию заключается в том, что при загрузке резервного шрифта все веса будут потеряны, потому что все они настроены на нормальное. Я думаю, что наилучшим подходом является сочетание стиля.

Если вас беспокоят пользователи IE8, вы можете использовать условный css.