Почему текст html иногда появляется искаженным при просмотре в Chrome или Safari в Windows?

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

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

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

example 1

example 2

example 3

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

example 4

Ответы

Ответ 1

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

Ответ 2

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

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

Ответ 3

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

Если у вас есть, попробуйте запустить TTF через генератор шрифтов FontSquirrel:

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

Ответ 4

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

Ответ 5

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

Ответ 7

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

Ответ 8

Существует простой ответ на этот вопрос: ваш код css представлен перед обработкой вашей серверной части. Уверен, что вы используете какой-то тип css php или репозиторий для обслуживания вашего стиля /css/markup/jquery или внешнего источника для этой страницы.

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

Я надеюсь, что это поможет.

Ответ 9

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