Как исправить рендеринг логотипа svg более смелым, чем эквивалент png в Chrome и со странными пробелами в Firefox? - PullRequest
0 голосов
/ 22 января 2019

Я настраиваю новый веб-сайт для клиента и внедряю логотипы png и svg. Каким-то образом версия SVG отображает используемый шрифт намного смелее, и я не могу найти источник этой проблемы. Существует ли проблема css или какие настройки css необходимы для гармонизации внешнего вида?

Первый прикрепленный скриншот показывает Google Chrome версии 71.0.3578.98. Файл png вверху и файл svg внизу. SVG представляется гораздо смелее.

Google Chrome: top is png, bottom is svg wich is much bolder

Второй прикрепленный скриншот показывает Firefox Quantum 64.0.2. Файл png вверху и файл svg внизу. SVG отображается с правильным весом, но есть странные места, где ни один не должен быть (отмечен красным).

Firefox Quantum: top is png, bottom is svg wich is much bolder

У меня на сайте применяются следующие стили рендеринга CSS.

 body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...