У меня есть панель, которую можно развернуть или свести к минимуму с помощью вертикально центрированной связи с < или > как текст ссылки. В font-weight: 900 это не выделяется много, даже с большим серым фоном вокруг него. Я не хочу использовать изображение, и в текущем размере шрифта оба символа в настоящее время занимают максимальную ширину панели.
Есть ли способ сгустить линию над символами, превышающими 900? Или есть другая альтернатива, которую я мог бы использовать?
Спасибо заранее.
Ричард
К сожалению, размер шрифта не превышает 900, а размер шрифта по числу зависит от разных браузеров. Лучше всего использовать более толстый шрифт - вы не указали, что используете, но Impact относительно толстый и высокий по ширине, будучи веб-безопасным. В противном случае вы можете использовать шрифт @font-face для загрузки другого шрифта.
В CSS 3 есть еще один способ увеличить размер шрифта:
color:#888888;
text-shadow: 2px 0 #888888;
letter-spacing:2px;
font-weight:bold;
EDIT:
Для какой-то странной причины это выглядит не так красиво, как год назад. Он работает только с text-shadow 1px (на большинстве распространенных шрифтов другие более толстые шрифты могут работать с 2px). И с текстовой тенью всего 1px нет необходимости в таком большом расстоянии между буквами.
color:#888888;
text-shadow: 1px 0 #888888;
letter-spacing:1px;
font-weight:bold;
Чтобы добавить к Gogutz ответ, вы можете пойти еще более смелее, уложив текстовые тени в сетку. Запятая разделяет каждую строку:
.extra-bold {
text-shadow: 0px 1px, 1px 0px, 1px 1px;
}
Это довольно толстая. Но работает только с webkit.
font-size: -webkit-xxx-large;
font-weight: 900;
Вы можете использовать текстовую тень вместо font-weight
text-shadow: 0px 1px, 1px 0px, 1px 0px;