Проблема рендеринга CSS WebFont - 1 пиксель другого цвета

0

В Google Chrome (34.0.1847.131), возможно, и в других браузерах, у нас возникает проблема с нечетным отображением с помощью веб-шрифта с использованием MyFonts.

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

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

Это происходит во всех частях сайта, где используется шрифт, и возникает только при использовании webfont.

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

Размер шрифта установлен на 100% (для всех элементов), и это наследует 16px от элемента body, интересно меняя это на 18px, решает проблему рендеринга.

Попробовали с другими стандартными шрифтами, а не с другим webfont. Файлы шрифтов, я считаю, загружаются напрямую не удаленно.

Изображение 174551Изображение 174551

РЕШЕНИЕ Измените анкер с дисплея: inline; для отображения: встроенный блок; поскольку якорь неправильно подбирал текст.

благодаря

  • 0
    пожалуйста, предоставьте ссылку, чтобы проверить это.
  • 0
    Это закрытый сайт разработчиков с NDA, поэтому не может предоставить ссылку. А пока просто ищу какие-то идеи или кого-то, кто видел что-то подобное. При необходимости создаст демонстрационный сайт для иллюстрации вопроса.
Показать ещё 3 комментария
Теги:
google-chrome
webfonts

1 ответ

1
Лучший ответ

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

Попробуйте установить цвет фона на элементе, чтобы увидеть, есть ли какие-либо пиксели, которые фактически заканчиваются из элемента. Чтобы исправить это, вам нужно заставить элемент действительно обернуть текст (например, присвоив ему верхнее дополнение).

Поделиться
  • 0
    Спасибо! Цвет фона помог показать, что якорь не соответствует тексту. Я изменил отображение на встроенный блок, и это решило это.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню