Текст против изображения для заголовка сайта Баннер?

Question

Сайт, который я создаю, имеет довольно большой заголовок для своего баннера. Использование простого шрифта придает ему очень неровный вид, но кажется, что сглаженное изображение будет довольно большой загрузкой. Какой способ будет лучшим выбором или лучший способ для больших названий?

Вот баннер с чистым текстом. Уменьшено это не так заметно, но в натуральную величину это около 600 пикселей в поперечнике. Откройте изображение отдельно для полного эффекта:

Answer 1

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

h1 {
   .
   .
   .
   color: white;
   text-shadow: 0 0 1px white;
}

Я обнаружил, что достаточно просто сгладить шрифт, и если я не использую тень текста для каких-либо других эффектов, это хорошее решение для чего-либо, даже достаточно современного. Старые браузеры (вы знаете, кто вы есть) получат зазубрины, но вы не можете победить их всех.

Answer 2

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

Answer 3

Я бы всегда советовал не использовать изображения для текстового контента. Современные браузеры имеют встроенные возможности сглаживания, поэтому большие шрифты выглядят намного лучше, чем несколько лет назад. (И с каждым днем ​​все лучше.) Кроме того, использование разметки, такой как <h1>, позволяет вам сохранить семантическое значение заголовка, которое теряется при использовании тега <img> или CSS background-image. * 1004. *