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

Question

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

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

Answer 1

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

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

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

Answer 2

Изображение путь я бы. Есть techniques out there для меньшего размера изображения, не оставляя слишком много с точки зрения качества. Кроме того, как только он будет загружен в первый раз, его можно будет кэшировать, чтобы он больше не загружался.

Answer 3

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