Javascript 在传单标记内的内联SVG中呈现字体

我正在使用SVG字符串在传单地图中创建自定义标记。 这很好，但是SVG字符串中定义的FontFace不会渲染。 这样的构造有可能吗？ 我创造了一把小提琴

以下是相关代码：

let svg = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="36" height="36" viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve"><style type="text/css">   .circle{fill:#EEEEEE;stroke:#990000;stroke-width:3;stroke-miterlimit:10;}   .count{font-family:"Do Hyeon";font-size:12px;}</style><g id="Layer_2_1_">   <g id="Layer_1-2">      <circle class="circle" cx="16" cy="16" r="14"/> </g></g><text transform="matrix(1 0 0 1 10 20)" class="count">33</text></svg>';
let icon = L.icon({
    iconUrl: encodeURI("data:image/svg+xml," + svg).replace(new RegExp('#', 'g'),'%23'),
    
});
let marker = new L.marker([20, -80],{
    icon: icon
});
marker.addTo(map);

let svg='.circle{fill:#eeeeeeee；stroke:#990000；stroke width:3；stroke mit:10；}.count{font-family:“Do-Hyeon”；font-size:12px；}33'；
让icon=L.icon({
iconUrl:encodeURI（“数据：image/svg+xml，”+svg）.replace（新的RegExp（“#”），“g”），“%23”），
});
设标记=新的L.标记（[20，-80]{
图标：图标
});
marker.addTo（map）；

---

谢谢

我认为svg只有几种字体样式。如果您使用这个：

.count{font-family:“Helvetica”；font-size:12px；}

字体是changedYes，这确实有效。但我需要它来使用自定义字体。出于安全原因，数据URL必须是自包含的。这意味着他们无法访问作为web字体加载的字体。您可以使用的唯一字体是每个网站可用的标准字体。（@FalkeDesign这与SVG无关，只与浏览器技术有关。）如果您遵循此操作，图标将内联并可以访问文档样式表，包括加载在其中的webfonts。