Почему текст HTML иногда отображается искаженным при просмотре в Chrome или Safari в Windows? - PullRequest
15 голосов
/ 07 сентября 2011

Иногда пользователи сообщают, что текст https://squareup.com выглядит для них как бред (или искажен) ... однако мы не смогли воспроизвести это.

Пользователи сообщают, что используют Windows или Chrome или Safari, поэтому это может быть проблемой с webkit.

Вот три снимка экрана, которые были сделаны на https://squareup.com:

example 1

example 2

example 3

Страница цен на нашем текущем сайте:

example 4

Ответы [ 9 ]

14 голосов
/ 28 сентября 2011

Легко воссоздается с помощью более старой версии Windows, а также более старой ветви Chrome. Похоже, Chrome 4-8 имеют эту проблему. Для тестирования загрузитесь в XP с Chrome 4. Проблема заключается в text-rendering: optimizelegibility. Эта ошибка сообщается в более старых версиях Chrome при использовании optimizelegibility с @font-face при использовании woff-шрифтов. Если вы можете воспроизвести проблему, попробуйте убрать вертикальное выравнивание: базовая линия и посмотрите, не искажен ли рендеринг.

2 голосов
/ 28 сентября 2011

это что-то вроде удара в темноте, но не задумывались ли вы о повторной генерации файлов @fontface, на случай, если есть какая-то форма повреждения, которая появляется только при просмотре в определенных версиях браузера WebKit?Если у вас есть, попробуйте запустить TTF через генератор шрифтов FontSquirrel:

http://www.fontsquirrel.com/fontface/generator

2 голосов
/ 07 сентября 2011

Это может быть что-то, связанное с кодировкой символов. Попробуйте явно указать кодировку, поместив это в <head> страницы:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
1 голос
/ 30 сентября 2011

Мне кажется, что к рассматриваемым текстам применяется text-shadow. Это довольно передовой, экспериментальный, требовательный, ненадежный материал, для небольшого, если вообще какого-либо визуального значения (например, белые тени на белом фоне).

1 голос
/ 27 сентября 2011

у них, вероятно, отключен понятный тип. http://www.microsoft.com/typography/cleartype/tuner/step1.aspx

1 голос
/ 07 сентября 2011

У меня нет верного ответа для вас, но похоже, что вы используете класс Modernizr и смотрите на свой html-узел в Chrome, к нему применен класс js fontface, что наводит на мысль о пользовательских проблемах font-face.

1 голос
/ 07 сентября 2011

Может быть, это обычные шрифты? Когда я просматриваю ваш сайт в Firefox, он говорит, что это в Helvetica Neue, а в Chrome - ag1, agb

.
0 голосов
/ 24 февраля 2014

У меня была такая же проблема, и я понял, что проблема была с font-face.Среди исходных файлов с несколькими шрифтами второе предпочтение было для "svg", изменено на true, чтобы решить проблему.

0 голосов
/ 30 сентября 2011

Существует простой ответ на этот вопрос - ваш код CSS представлен до обработки на стороне сервера.Бьюсь об заклад, вы используете какой-то тип CSS CSS или хранилище для обслуживания вашего стиля / CSS / Markup / JQuery или внешнего источника для этой страницы.

Я бы посоветовал вам ввести некоторые состояния ожидания и проверки для постобработки или проверить ваши методы ajax / xajax.:)

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...