Font-weight не работает должным образом?

http://www.i3physics.com/blog/2010/07/dsfsdf/

Вот пример.

Часть, где она говорила "PHP" (правый верхний угол), оставалась такой же тонкой, как и она. вот часть кода css

.wp_syntax_lang {
  background-color:#3c3c3c;
  position:absolute;
  right:0;
  padding:1px 10px 3px;
  color:#ddd; font-size:9px; font-weight:800;
  text-transform:uppercase;
  -moz-border-radius-bottomleft:5px;
  -webkit-border-bottom-left-radius:5px;
  border-radius-bottomleft:5px;
}

Я старался смело, смелее, 700, 800, 900 и не работал под FF.

Ответ 1

Потому что размер шрифта (9px) слишком мал, чтобы отобразить полужирный шрифт. Попробуйте 11px или больше, и он отлично работает.

Ответ 2

Большинство браузеров не полностью поддерживают числовые значения для font-weight. Вот хорошая статья о проблеме, и даже жесткая она немного старая, она кажется правильной.

Если вам нужно что-то более смелое, вы можете попробовать использовать другой шрифт, более смелый, чем ваш существующий. Естественно, вы могли бы скорректировать размер шрифта для аналогичного эффекта.

Ответ 3

font-weight также может не работать, если шрифт, который вы используете, не имеет этих весов, вы часто сталкиваетесь с этим при встраивании пользовательских шрифтов. В этих случаях браузер, скорее всего, будет округлять число до ближайшего веса, доступного ему.

Например, если я вставляю следующий шрифт...

@font-face {
    font-family: 'Nexa';
    src: url(...);
    font-weight: 300;
    font-style: normal;
}

Тогда я не смогу использовать ничего, кроме веса 300. Все остальные веса вернутся к 300, если я не укажу дополнительные объявления @font-face с этими дополнительными весами.

Ответ 4

Я удалил text-transform: uppercase;, а затем установил его в bold/bolder, и это, казалось, сработало.

Ответ 5

Для меня смелая работа, когда я меняю стиль шрифта с font-family: 'Open Sans', sans-serif; на Arial

Ответ 6

В моем случае я использовал шрифт Google Roboto. Поэтому мне пришлось импортировать его в начале моей страницы с указанием правильного веса.

<link href = "https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto+Slab|Roboto:300,400,500,700" rel = "stylesheet" />