Методы сглаживания шрифта? Текст-тени по-разному в Chrome 14.0.833.0 или выше

Question

РЕДАКТИРОВАТЬ:

Сейчас мы находимся в Chrome 19, и это все еще не исправлено. Просто разъяснение: это происходит в Chrome в Windows, а не в Linux или Mac. Я думаю, что это связано с ClearType. Google, пожалуйста, исправьте это.

Я использую CSS3 text-shadow Чтобы подражать сглаживанию шрифта IE9 в других браузерах. В основном я только что установил текстовую тень текста контейнера на фон контейнера. Вы можете увидеть поведение, настроив text-shadow на крупном элементе шрифта во всем, что ниже хрома 14.0.833. Текст выглядит гладким. Удалите текстовые тени, и шрифт выглядит зазубренным. Однако в Chrome 14.0.833 (обновление: Похоже, оно также «сломано» в 14.0.834), это больше не работает. Свойство текста-тени все еще работает, но не так, как это было раньше. Вы можете увидеть поведение здесь (Просто загрузите его с помощью Diff. Хромированные версии) Кажется, что в более старых хромах текстовая тень началась внутри текста немного, а затем распространилась - возможно, поэтому взлом текста -тени работал. В более новом хроме появляется текстовая тень начинается просто вне Текст, поэтому он не сработает. Видите, что я имею в виду здесь.

Мой вопрос в основном: Это ошибка? Какое ожидаемое поведение, если? Есть ли другие обходные пути с разглаживанием шрифтов, которые я могу использовать?

W3C спецификация Казалось, не говорил, каково предполагаемое поведение, хотя я видел, что, возможно, мне следует использовать текст-вуза (что вроде не поддерживается, что побеждает цель)

Answer 1

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

Сначала я попробовал -webkit-text-stroke:1px #000 куда #000 цвет текста. Но этот стиль предназначен для использования, где цвет текста отличается от удара, для хорошей текстовой линии. Когда оба они одинаковы, это выглядит ... странно. Я не уверен, почему; Я не эксперт по продаже шрифтов. Вы можете увидеть поведение на картинке после статьи.

Затем я попробовал просто text-shadow:#000 0 0 1px куда #000 это тот же цвет, что и текст. Из -за той же проблемы Chrome 14.0.833+, это все еще оставляет шрифт, который выглядит несколько зазубренным. Однако лучше, чем просто просто.

Затем я попробовал объединить две попытки выше. Это выглядит немного лучше, но он разбивает текст, так как он, по сути, добавляет 2 пикселя к мысли текста.

Наконец, я попытался применить два текстовых тени: text-shadow:#000 0 1px 1px,#000 0 -1px 1px >> Где #000 цвет текста. То, что это делает, применяет два текстовых тени, один из которых немного оттолкнут, а другой подтолкнут. Таким образом, текстовая тень охватывает зубчатые края. Он немного разбивает текст, но определенно сглаживает его.

В зависимости от размера вашего текста, различные методы работают. Меньший (но все еще зазуенный) текст может использовать текстовые тени, более крупный текст может использовать метод тени/хода, а очень большой текст может использовать метод с двойной тенью. Конечно, чем больше текст, тем менее заметным становится лишние несколько пикселей. Вы можете увидеть все различные методы здесь

Answer 2

Okay, i've spend quite a bit of time on this and this is what it comes down to: It's a bug.

First of all, -webkit-font-smoothing:antialiased; only works for Mac, not Windows.

I'm on Windows7, I've created a layered Pixlr image with screen shots of a JSfiddle I made that had 4 different elements with different text-shadow applied to each. You can clearly see that text-shadow has changed since Chrome13 and Chrome 14.0.835. I had to switch between the Beta and Dev channel a couple of times because I messed up, uninstalling etc. ugh.

Download the layered Pixlr image file I made from:

http://dl.dropbox.com/u/7353877/Chrome-text-shadow-v13-v14_0_835.pxd

Then go to http://pixlr.com/editor/ and choose to open file from computer, open the file. Now in Pixlr, zoom in to the four rows of text, in the layers panel on the top layer click the checkbox and uncheck it, then check it again, do it over and over and see how drastic the change to text-shadow is.

This should be submitted as a bug. A link back to this page could be used to show the effect, if needed.

JSfiddle (The JSfiddle I used in the screenshots) http://jsfiddle.net/nicktheandroid/Xkp9q/

I put a piece of pie in the microwave an hour and a half ago.... it's cold :(

Answer 3

text-shadow: transparent 0px 0px 0px, #000 1px 2px 1px;

ИЛИ ЖЕ

text-shadow: transparent 0px 0px 0px, rgba(0,0,0, 0.75) 1px 2px 1px;

Протестировано и отлично работает в разных версиях Opera, Chrome, Safari & Firefox.

Answer 4

-webkit-font-smoothing:antialiased; 

Может работать на вас

Answer 5

ДА! Я нашел решение для этой проблемы. Это странно, но это работает для меня.

Итак, чтобы заставить его работать, поместите этот стиль на элемент, который вы хотите сгладить:

-webkit-border-bottom-left-radius: 1px;
text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01);
overflow: hidden;

Я поставил Пример HTML -файла Только с этим стилем, чтобы вы могли быстро проверить его.

Answer 6

Это было действительно так, как много веб -салонов (Google Webfonts, а также высокопрофессиональные шрифты от Typekit и т. Д.) Взглянули в Firefox (слева) и Google Chrome (справа) в системах Windows (и в конечном итоге в других местах). Не шутка! Чтобы уточнить это: единственным браузером, который полностью испортил Google Webfonts, был браузер Google Chrome. Насколько это больно? В 2013 году Opera Browser переключил свой рендеринг двигателя на Webkit (= трансшись в Chrome), поэтому эта проблема существует и в Opera.

более : http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/