Ссылка на полужирную версию без использования шрифта: жирный?

Я использую веб-шрифты на сайте. Для определенных заголовков (h1, h2 и т. д.) я использую полужирные варианты (и устанавливаю font-weight на обычный), потому что они выглядят намного лучше, чем при использовании обычного варианта и оставлении h-тегов жирным шрифтом по умолчанию. Необходимо указать font-weight: normal, потому что иначе "выделено жирным шрифтом", что выглядит ужасно.

Проблема, с которой я сталкиваюсь, заключается в том, как указать стандартные веб-шрифты в качестве резервных шрифтов и «восстановить» жирный шрифт?

Так, например, я мог бы сделать что-то вроде:

@font-face {
    font-family: "My bold webfont";
    src: url("url/of/webfont/bold/variant");
}

h1 {
    font-family: "My bold webfont", Arial, sans-serif;
    font-weight: normal; 
}

Пока присутствует веб-шрифт, у нас нет проблем, но если веб-шрифт не работает, мы получаем Arial, не выделенный полужирным шрифтом.

Есть ли способ указать «Arial Bold» в font-family из h1 (я знаю, что это не работает, но это желаемая цель)? Или, возможно, в определении @font-face я могу сказать: «Это относится только к выделенной жирным шрифтом версии того, чему оно назначено», чтобы я мог опустить font-weight: normal из стиля h1?


css webfonts
person Bob Meador    schedule 28.08.2012    source источник
comment
Вы пробовали использовать числовое значение, например 500? Учитывая, что ваши веб-шрифты поддерживают этот размер, а Arial — нет, последний может вернуться к normal (это просто мысль, я не пробовал). Я действительно не понимаю, как это можно сделать с помощью CSS чистым способом.   -  person Maroshii    schedule 29.08.2012

Ответы (1)


arrow_upward
3
arrow_downward

Попробуйте указать font-weight: bold в обоих местах:

@font-face {
    font-family: "My bold webfont";
    src: url("url/of/webfont/bold/variant");
    font-weight: bold;
}

h1 {
    font-family: "My bold webfont", Arial, sans-serif;
    font-weight: bold;
}

Вот демонстрация. p#one показано использование этой техники; если вы посмотрите на него в браузере, который не поддерживает веб-шрифты WOFF, вы увидите шрифт по умолчанию, выделенный жирным шрифтом.

person Ry-♦    schedule 28.08.2012
comment
Я думаю, что OP хочет font-weight: normal для веб-шрифта и bold только тогда, когда веб-шрифт не работает, а другой используется. - person The Alpha; 29.08.2012
comment
@SheikhHeera: Вот что делает указание font-weight: bold в @font-face — браузер предполагает, что шрифт уже выделен жирным шрифтом. - person Ry-♦; 29.08.2012
comment
@SheikhHeera: взгляните на демо. - person Ry-♦; 29.08.2012
comment
Да! Вот и все. Мы сообщаем @font-face, что это определение семейства шрифтов предполагает, что любой стиль, в котором оно используется, будет выделен жирным шрифтом, поэтому не делайте его снова жирным. Работает отлично - спасибо! - person Bob Meador; 31.08.2012