Почему в разных браузерах по-разному отображается Arial Black в svg-изображении?

Question

[Maxibonoff]

Имеется svg-изображение со следующим содержимым:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="220px" height="86px" viewBox="0 0 220 86" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>logo</title>
    <defs>
        <rect id="path-1" x="0" y="0" width="220" height="86"></rect>
        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="220" height="86" fill="white">
            <use xlink:href="#path-1"></use>
        </mask>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="best">
            <use stroke="#FFFFFF" mask="url(#mask-2)" stroke-width="2" xlink:href="#path-1"></use>
            <rect fill="#D0011B" x="20" y="0" width="200" height="51"></rect>
            <text font-family="Arial Black" font-size="14" font-weight="700" fill="#4A4A4A">
                <tspan x="27.5" y="67">потолки и светильники</tspan>
            </text>
            <text font-family="Arial Black" font-size="36" font-weight="700" fill="#FFFFFF">
                <tspan x="27.9" y="40">SOFFITTI</tspan>
            </text>
        </g>
    </g>
</svg>

В chrome, safari, firefox на MacOS показывает корректно:

В firefox на Windows показывает некорректно:


Как исправить подобное? Если подключением шрифта в svg-изображении, то как?

Comments

[Lynn «Кофеман»]

А на винде у вас этот шрифт есть вообще?

Answer 1

[Олег]

Перевести шрифт в кривые.

Comments

[Maxibonoff]

Олег, можно поподробнее?

[Олег]

Maxibonoff: Откройте SVG в редакторе и проделайте эту процедуру, подробнее для конкретного редактора легко гуглится.

[Maxibonoff]

Олег: Спасибо большое, все получилось.

Answer 2

[dom1n1k]

Обычно начертание Black это 900, а не 700