Файлы SVG по-разному отображаются в браузерах — типографика

У меня проблема с фоном svg, который по-разному отображается в браузерах. В Chrome буквы правильно выделены без света, а два слова выделены жирным шрифтом. В файрфоксе такого нет. Как мне это исправить, чтобы он выглядел как в Chrome во всех браузерах?

Кроме того, они кажутся тяжелыми для FPS, даже если файлы меньше 1 КБ. Почему это?

сайт: http://www.teamgenerous.com

Браузеры: новейшие версии

разный рендеринг Chrome и Firefox

Спасибо

Разве вы не конвертируете текст в контуры перед сохранением?
Играли с Adobe CEF/SVG с подмножеством и без него. В Firefox никаких результатов. Работает только контур.
См. этот вопрос здесь: stackoverflow.com/questions/20905026/…
@Vnovak, вы могли бы, но тогда вы потеряете преимущество наличия текста в SVG с точки зрения доступности / SEO.
похоже, что шрифт должен быть размещен на том же хосте, что и страница ... и это больше похоже на встраивание шрифта в веб-сайт. Я не уверен, но это может привести к проблемам с авторскими правами и потребует отдельной лицензии (аналогично использованию веб-шрифтов). Если это так, проще запустить шрифт как веб-шрифт, а не SVG. Могу ошибаться ;)
Просто к вашему сведению: на моем Linux FF 30.0 он выглядит еще более сломанным imgur.com/qolLXDd

Ответы (2)

На самом деле это известная ошибка «wontfix», связанная с тем, что Firefox не полностью поддерживает шрифты SVG. Как только WOFF2 станет полностью поддерживаться, Firefox будет отображать контуры шрифта SVG, встроенные в шрифт WOFF 2 со вкусом OpenType. По крайней мере, это идея. Узнайте больше здесь: https://bugzilla.mozilla.org/show_bug.cgi?id=119490

поскольку у каждого браузера есть шрифт по умолчанию, для его рендеринга вы должны использовать нормализацию css, например библиотеку , или отключить шрифт по умолчанию с помощью javascript и css.