Стиль закрытия встроенного CSS SVG-изображения не работает

Question

У меня странная проблема с рендерингом изображений SVG, содержащих текст.Когда я добавляю собственный шрифт в раздел DEF и встраиваю изображение в тело документа, все работает отлично.

Однако, когда я определяю тот же код SVG как часть URL-адреса изображения CSS, явижу странное поведение.

Прежде всего, мой редактор (подсветка синтаксиса) и браузер отмечают проблему, когда они видят закрывающий тег "style" в определении css.В приведенном ниже примере я использовал html-кодировку для закрывающего тега стиля, чтобы заставить страницу действительно работать!Однако, спросите вы можете видеть, что шрифт, отображаемый в результате фонового подхода CSS, использует неправильный шрифт.

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

Взгляните на мой рабочий пример здесь!https://jsfiddle.net/j72ayfrn/

Если вы редактируете CSS и переключаетесь на использование обычного закрывающего тега, ничего не отображается.Скопируйте код и запустите в своем браузере, и вы получите код, напечатанный на вашем экране.

Любые идеи !!Спасибо

HTML

<div class="size This_Works">

        </div>
        <div class="size This_Doesnt">
                <svg width='390' height='54' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'>
                    <defs>
                        <style type='text/css'> 
                            @font-face {
                                font-family: 'Charmonman';
                                font-style: normal;
                                font-weight: 400;
                                src: local('Charmonman Regular'), local('Charmonman-Regular'), url(https://fonts.gstatic.com/s/charmonman/v1/MjQDmiR3vP_nuxDv47jiaJaivQ.woff2) format('woff2');
                            }
                        </style>
                    </defs>
                    <style type='text/css'> 
                        .st0 {
                            font-family:'Charmonman';
                        } 
                    </style> 
                    <text x='50%' y='50%' text-anchor='middle' dominant-baseline='central' class='st0' style='fill:rgb(37,37,38);'>This font is Right</text>
                </svg>
        </div>

CSS

.size {
            width: 500px;
            height: 200px;
            background-color: ;
        }
        .This_Doesnt {
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            background-image: url("data:image/svg+xml;utf8,<svg width='390' height='54' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><defs><style type='text/css'> @font-face { font-family: 'Charmonman'; font-style: normal; font-weight: 400; src: local('Charmonman Regular'), local('Charmonman-Regular'), url(https://fonts.gstatic.com/s/charmonman/v1/MjQDmiR3vP_nuxDv47jiaJaivQ.woff2) format('woff2'); } %3C%2Fstyle%3E </defs><style type='text/css'> .st0{font-family:'Charmonman';} %3C%2Fstyle%3E <text x='50%' y='50%' text-anchor='middle' dominant-baseline='central' class='st0' style='fill:rgb(37,37,38);'>The font is wrong</text></svg>");
        }