2013-07-19 3 views
-1

Я столкнулся с некоторыми хорошими конструкциями CSS, которые я пытаюсь воспроизвести на своем собственном сайте. Проблема в том, что проекты были представлены как изображения ... скриншоты на реальной странице. Это означает, что я пытался воспроизвести дизайн в моем собственном CSS.Серый текст на веб-сайте имеет цвет

Вот проблема: текст Я рендеринг окрашен в оттенках серой (все RGB значение равно) в моем CSS, но если я скриншот моей страницы и увеличить, вы можете увидеть цветных пикселей по всему тексту. В оригинальном дизайне нет таких ... он совершенно серый, и, следовательно, выглядит намного более гладким.

Вот оригинал в обычный размер (очень гладкий ищет): enter image description here

И здесь увеличено (заметьте, что все пиксели в оттенках серого): enter image description here

Теперь, вот моя попытка обычного размера (обратите внимание, как грубо это выглядит): enter image description here

И увеличено (см все цветные пиксели): enter image description here

Что здесь происходит? Как я могу добиться гладкого внешнего вида оригинального дизайна без цветных пикселей?

+2

Это [рендеринг подпикселя] (http://en.wikipedia.org/wiki/Subpixel_rendering). Не о чем беспокоиться. –

+1

«Цветные» пиксели - это артефакты субпиксельной визуализации шрифтов. Насколько я могу судить, мало что можно сделать по этому поводу. –

+1

@PeterO. Ну, вы можете изменить настройки на своем собственном компьютере. Но если вы хотите, чтобы пользователи на вашей веб-странице отображали то же самое, что и вы, да, тогда у вас есть проблема. Вам нужно будет прибегнуть к трюкам замены изображений. –

ответ

3

Возможно, автор использовал другую систему, когда снял снимок экрана. У Mac и Windows машины гладкие шрифты по-разному. Существует свойство -webkit-font-smoothing, но я думаю, что это применимо только к Safari на Mac в будущем.

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

How To Properly Smooth Font Using CSS3

Смежные вопросы