Сглаженный шрифт на странице HTML

Есть ли хороший способ создать четкий, четкий, БОЛЬШОЙ шрифт на веб-страницах? Мне нужно создать эффект облака тегов на моей домашней странице с разными размерами и цветами шрифта.

Я настроил его в HTML/CSS, но в старых браузерах или ОС, которые не поддерживают сглаживание по умолчанию, это выглядит немного... паршиво.

Я играл с sIFR, который работал прекрасно, но давал мне ужасные эффекты загрузки, но я m теперь интересно, есть ли способ:

а) выполнить обнаружение браузера/ОС, чтобы разделить пользователей по комбинациям браузера/ОС, которые, как я ЗНАЮ, поддерживают сглаживание (они получают необработанный HTML) и «другими», которые получают тег изображения.

б) Какой-то JavaScript для добавления сглаживания?

c) Постоянное решение для загрузки изображения BG в div и скрытия текста HTML. (Знаю, знаю страшилки Google про деиндексацию... но возможно ли это?)


browser-detection antialiasing
person MrFidge    schedule 19.03.2009    source источник
comment
Это действительно имеет значение? Природа Интернета такова, что у вас нет точного контроля над отображением контента — это явная цель дизайна. В общем, лучше принять это и сосредоточить свою энергию на других вещах.   -  person Hank Gay    schedule 19.03.2009
comment
Полностью согласен с Хэнк!   -  person winsmith    schedule 19.03.2009
comment
В данном случае это действительно важно — это домашняя страница-образец, поэтому пиксельная точность имеет значение. Просто нужно найти самый изящный способ добиться этого.   -  person MrFidge    schedule 19.03.2009

Ответы (5)


arrow_upward
4
arrow_downward

а) Конечно, вы можете использовать определение браузера. Вероятно, проще всего это сделать с помощью jQuery метод браузера. (jQuery — потрясающая библиотека JavaScript, которая значительно упрощает разработку JS, если вы еще не слышали)

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

Тем не менее, я советую против этого. На новых машинах все выглядит лучше, чем на старых. Так оно и есть, поэтому я не рекомендую тратить драгоценное время на мелкие сбои в старых браузерах. -- Если, конечно, ваша основная демографическая группа не состоит из пользователей со старыми браузерами. В таком случае, как насчет того, чтобы просто сделать это во Flash? Нет смысла кодировать два решения, если одно всегда работает, верно?

б) Фактически вы можете создавать сглаженный текст с помощью JavaScript. Взгляните на мой проект Die Stimme Gottes ("Голос Бога" - не для религиозно брезгливый) для примера. В этом проекте я использовал для этого отличный typeface.js.

c) Просто используйте CSS, может быть?

h1.welcome {
    background: url('the-welcome-image.png') no-repeat;
    color: transparent;

}

person winsmith    schedule 19.03.2009
comment
хм... сначала шрифт typeface.js меня впечатлил, пока я не попытался увеличить страницу. Выглядит ужасно! typeface.neocracy.org/examples.html - person Simon_Weaver; 12.03.2011

arrow_upward
5
arrow_downward

+1 комментарий Хэнка. Вы мало что выиграете, делая это. Некоторые настольные браузеры (включая IE7+ и Safari) включают сглаживание по умолчанию, даже если оно отключено на уровне ОС, а современные (после XP) ОС, как правило, включают его по умолчанию в любом случае. Принудительно применяя АА к остальным, вы:

(+) немного улучшить отображение для пользователей IE6 и XP+Firefox, у которых невольно нет AA

(-) сделать загрузку медленнее для всех (но особенно для пользователей ограниченных мобильных устройств)

(-) отключить предпочтительные размеры шрифта

(-) излишне раздражать луддитов, которые намеренно отключают сглаживание, потому что оно «все размыто»(*)

(*: есть ограниченные случаи, когда это даже имеет смысл, особенно для старых нечетких ЭЛТ-мониторов.)

person bobince    schedule 19.03.2009

arrow_upward
0
arrow_downward

Судя по всему, лучшие методы (не в реальном порядке):

1) Используйте изображение. Если вы полагаетесь на SEO для сайта, то обязательно добавьте html и скройте его с помощью css используя один из этих методов

2) typeface.js — JS, который будет работать в большинстве современных браузеров. Есть некоторые ошибки и сбои, но работает хорошо. Если вы собираетесь принудительно сглаживать своих пользователей, то это работает. Используйте экономно. Хотя автор работает над совместимостью Opera и IE8...

2) sIFR - Отличный скрипт, который динамически заменяет выбранные вами области текста флэш-роликами. Снова некоторые ошибки и сбои, но если вы просто заинтересованы в потрясающе выглядящем шрифте, то это идеально. Однако увеличивает загрузку страницы, так что, чем больше, тем меньше, используйте экономно.

Я склонен не использовать тяжелые решения JS, так как мне нравится молниеносная загрузка страниц, но если у вас ДОЛЖНЫ быть красивые шрифты, то эти методы кажутся наиболее изящными и простыми.

person MrFidge    schedule 23.03.2009

arrow_upward
0
arrow_downward

Принудительный цвет фона, переопределяя его для класса или элемента с тем же цветом фона. Оно работает.

span.your_class {
    writing-mode: tb-rl;
    filter: flipv fliph;
    background-color: #006cb8 !important;
}
person DMC    schedule 20.12.2012

arrow_upward
-5
arrow_downward

Flash или Silverlight — ваш лучший выбор для великолепного рендеринга шрифтов.

person Andrew Harry    schedule 19.03.2009
comment
И даже менее доступны, чем изображения с тегами alt или ‹h1› с фоновым изображением. Нет, спасибо. - person Rob Howard; 19.03.2009
comment
Ага не хотел использовать вспышку именно по этой причине. sIFR — хороший компромисс, потому что он деградирует до простого html, но, к сожалению, мы не смогли его использовать. - person MrFidge; 19.03.2009