Веб-шрифты и резервные шрифты

Предположительно, вы используете файлы шрифтов и файл CSS, сгенерированные FontSquirrel. Проблема с их подходом заключается в том, что каждый конкретный шрифт (например, Open Sans Regular и Open Sans Bold) представлен как отдельное семейство шрифтов с нормальным весом шрифта. Это означает, что вместо разметки, такой как <p>foo <strong>bar</strong>, и простого CSS, такого как p { font-family: Open Sans, Arial } (позволяя браузерам по умолчанию strong набирать жирный шрифт и выбирать подходящий шрифт из семейства Open Sans), вы будете вынуждены явно устанавливать шрифты. Это означает установку как семейства шрифтов, так и толщины шрифта, неявно со значением свойства font-family.

Вам нужно будет настроить CSS, чтобы получить лучший подход. Вы бы использовали одно и то же семейство шрифтов, но разные веса в правиле @font-family, а в правиле font-family вы бы только установили семейство:

@font-face {
    font-family: 'open_sans';
    src: url('opensans-bold-webfont.eot');
    src: url('opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-bold-webfont.woff') format('woff'),
         url('opensans-bold-webfont.ttf') format('truetype'),
         url('opensans-bold-webfont.svg#OpenSans') format('svg');
    font-weight: bold;
    font-style: normal;
}   
@font-face {
    font-family: 'open_sans';
    src: url('opensans-regular-webfont.eot');
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-regular-webfont.woff') format('woff'),
         url('opensans-regular-webfont.ttf') format('truetype'),
         url('opensans-regular-webfont.svg#OpenSans') format('svg');
    font-weight: normal;
    font-style: normal;
}
* { font-family: open_sans, Arial; }

И тогда вы просто использовали бы font-weight: bold (или разметку HTML, которая имеет такой эффект по умолчанию, например, strong, b, th, h1 до h6) для тех элементов, которые должны отображаться в Open Sans Bold.

То, как вы описываете, похоже, работает и в большинстве браузеров, но я бы на это не рассчитывал. После того как вы объявили шрифт с нормальным весом в своем @font-face, установка font-weight: bold для текста в этом шрифте может привести к а) сбою, поскольку а веса не совпадают или б) шрифт, взятый в качестве отправной точки для алгоритмического жирного шрифта, в результате чего двойным жирным шрифтом. И если я не ошибаюсь, б) это то, что происходит в Safari (Win 7).

Вы правильно указали на проблему, связанную с «новой эрой» веб-шрифтов. В этой записи блога она обсуждается и предлагается обходной путь http://elliotjaystocks.com/blog/font-weight-in-the-age.-of-web-fonts/

Соответствующий фрагмент

Проблема номер два значительно больше, чем первая. Рассмотрим FF Enzo, у которого нет веса 400 (или даже 500). В некоторых случаях его легкий (300) вес может быть слишком тонким для маленького телосложения, поэтому давайте вместо этого используем вес 600. А, выглядит нормально.

Но это не нормально! Потому что, если этот шрифт не может быть отображен, и мы используем что-то другое, этот резервный шрифт будет отображаться со своим весом 600; другими словами: смелый.

Обходной путь?

Есть способ обойти это, и это метод, который FontsLive использует в CSS, который они генерируют для своих пользователей: вы объявляете каждый вес отдельно, а не все семейство. Их код выглядит примерно так:

CSS-код:

{ font-family: 'FamilyName Light', 'FallbackFamily', serif; font-weight: normal; }
{ font-family: 'FamilyName Medium', 'FallbackFamily', serif; font-weight: normal; }
{ font-family: 'FamilyName Bold', 'FallbackFamily', serif; font-weight: bold; }
{ font-family: 'FamilyName Black', 'FallbackFamily', serif; font-weight: bold; }

Обновление:

@font-face {
    font-family: 'OpenSansBold';
    src: url('../fonts/OpenSans-Bold-webfont.eot');
    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

А потом что-то вроде (как вы предложили):

{ font-family: OpenSansBold, 'Arial'; font-weight: bold; }

Хотя принятый ответ работает, если вы хотите предоставить действительно точный запасной шрифт, вам также потребуется определить отдельную высоту строки и межбуквенный интервал для каждого запасного варианта. Основная причина для этого заключается в том, что Google недавно представил показатель кумулятивного смещения макета (CLS), показывающий, насколько сильно страница прыгает при загрузке.

Вы можете добиться этого, поместив класс CSS в тело перед загрузкой шрифта, который будет удален, если загрузка шрифта завершится успешно. Я делаю это, добавляя это вверху страницы:

<script>!function(d){if (d.fonts.ready){d.body.className="loading";d.fonts.ready.then(function(){d.body.className=""})}}(document)</script>

Тогда ваш CSS будет выглядеть примерно так:

h1,p {font-family: Open Sans, Arial}
h1.loading {font-family: Arial;line-height:16px}
p.loading {font-family: Arial;line-height:12px}

Добавляя и удаляя класс «загрузка» в инспекторе, вы можете затем поиграть с CSS, чтобы он перестал прыгать. С этим вы можете надежно обнулить CLS, чтобы угодить богам Google. Единственная альтернатива, которую я нашел, - это использование библиотеки загрузчика шрифтов, которая дает штраф за время загрузки.