Судя по всему, шрифт используется системный. На основном компьютере он установлен, поэтому при рендеринге картинки подгружается и отображается корректно. Но на других компьютерах этого шрифта нет в системе, поэтому используется дефолтный (раз с засечками — значит Times, serif).
Как решить?
- Попробовать включить шрифт в SVG. Можно с помощью
<style> @import или <style> @font-face. Это проще всего, позволит легко изменить текст внутри SVG если понадобится. Минус — размер загружаемых данных: весь шрифт будет либо грузиться отдельным файлом при @import, либо размер файла будет большим при @font-face.
- Можно перед сохраниением SVG превратить текст в кривые. ��апример в Figma за это отвечает чекбокс Outline Text при экспорте.
У вас скорее всего в svg файле есть текст, для которого задан шрифт. Этот шрифт есть на одном компьютере и отсутствует на другом. Вам надо преобразовать текст в кривые или весь лого в png.
https://habr.com/ru/articles/159017/
Автор
Anonymous User 20954792
(@anonymized-20954792)
@cadic , @efess Спасибо большое за идеи! ) Да, действительно, несмотря на то, что WP включает логотип в тег img, шрифты нужны всё равно и на машинах, на которых этих довольно экзотических шрифтов нет, всё и «съехало»… Изначально логотип и был в .png, но он из 2-х строк текста, поэтому даже на обычном разрешении без масштабирования он был «замылен» слегка. Мне это не понравилось и я решил переделать в вектор и… Да, гораздо проще было бы, если бы я сам начинал проект. Ко мне он попал на доделку, а я не сильно дока в WP, к тому же, сайт переносили на WP исключительно через админку WP, и теперь разобраться в файловой структуре и что-то менять там нереально — полный хаос. В итоге действительно превратил текст в вектор и всё заработало, причём по сравнению с исходным размер файла значительно сократился, несмотря на разросшийся код самой svg ))
Попробуйте использовать программу svg cleaner для уменьшения размера логотипа. Уменьшите до минимума (1 знак после запятой) «точность» всех параметров.
Кстати, png тоже может быть вполне себе немыльный, за счет использования ретины. главное, коэффициент увеличения сделать ровный — 2х например
Автор
Anonymous User 20954792
(@anonymized-20954792)
@efess Я пропускал готовый SVG через SVGOMG. Интересно, что после пропуска текст (там небольшой шрифт) начинает как бы частично блёкнуть при 100% масштабе в браузере и меньше. Если увеличить масштаб — да, он проступает чётко. А вот в обычных условиях — вот так (картинка). Я пробовал играться с точностью в SVGOMG, но это не решает эту проблему. А если не чистить — то всё отображается хорошо (картинка)
-
Ответ изменён 1 год, 4 месяца назад пользователем
Anonymous User 20954792.
если проблему с текстом в лого до сих пор не решил, выложи где нибудь свою свг-шку, только до ее обработали клинерамм.
Может кому пригодится, искал ответ на свой вопрос, наткнулся на эту тему в поиске. Не отображался логотип в формате svg, нужно посмотреть класс логотипа в коде и прописать его размер в дополнительных стилях.
.custom-logo-link img { width: 100%!important; }
