Css 在SVG中使用Google字体？

我很难让我的SVG显示谷歌字体Lato。我读了类似的问题，并试图实现我所学到的。值得一提的是，这种字体确实会显示在我的电脑上（因为我安装了谷歌字体），但它不会显示在其他地方

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 360 260" style="enable-background:new 0 0 360 260;" xml:space="preserve">
<style type="text/css">
    @import url('https://fonts.googleapis.com/css?family=Lato');
    .st0{fill:#ECF0F1;}
    .st1{fill:none;}
    .st2{fill:#34495E;stroke:#34495E;stroke-width:0.25;stroke-miterlimit:10;}
    .st3{'Lato', sans-serif;}
    .st4{font-size:35px;}
    .st5{fill:none;stroke:#34495E;stroke-width:3;stroke-miterlimit:10;}
    .st6{font-weight: 'lighter';}
    .st7{fill:#34495E;}
</style>
<title>hangman_game</title>
<rect class="st0" width="360" height="260"/>
<rect x="-8.7" y="207.2" class="st1" width="377.4" height="33"/>
<text transform="matrix(1 0 0 1 12.5111 232.7089)" class="st3 st4 st7" font-weight="300">Colombia Infographics</text>
<g>
    <g>
        <g>
            <path class="st5" d="M117.4,133c0.3-0.8,1.2-1.8,1.3-2.5c0.3-1.2-0.5-2.1-0.3-3.2c0.3-1.9,2.4-3.1,2.5-5.2c1.2-0.6,1-0.1,1.9-1.3
                c0.5,0.6,1.4,0.6,1.8,0.9c0.9-1.3,1.9-0.6,3.2-1.6c1.2-0.9,1.5-2.4,2.4-3.5c2.4-2.8,5.4-5,7.6-7.9c-0.9-0.8-1.9-1.3-3.1-1.4
                c0.1-0.8-0.3-1.9-0.1-2.8c-0.4,0.5-1.4,0.8-1.8,1.2c-2-3.1-1-2,0-4.9c0.4-1.2,0.8-3,0.8-4.4c-0.1-2.2-4.1-8.4,1.3-7.5
                c0.2-0.8,0.1-2-0.3-2.7c-1-0.4-1.9-0.6-3-0.7c-0.5-3.1,3.4-2.5,1.1-5.5c-0.2-0.2-1.5-0.1-2.1-0.7c-0.8-0.8-1-1.9-1.3-3
                c-0.8-2.6-0.9-5.2,0.6-7.1c0.5-0.6,1.6-0.5,2.3-1.5c0.7-0.8,0.9-2.5,1.4-3.5c-1.9-1.3-1.9-6.5,1.3-5.6c1.5,0.4,0.5,1.4,1.3,2.4
                c0.2,0.2,1.4,0.3,1.5,0.7c0,0.1,0.1,1.7,0.1,1.7c0.4,1-1.7,1.4,0.9,2.1c1.9,0.5,2.4-0.3,2.2-2.3c-0.2-2.3-3.2-3.5-1.5-6.1
                c4,0.3,3.9-3.3,7.1-5.1c2.9-1.6,6.9-1.6,5.9-6.2c-1.3-0.2-1.9-0.1-2.5,1.1c-0.2-1.8,1.2-3.5,2.2-4.9c0.9-1.3,1.6-3.8,2.4-4.8
                c3-3.4,6.1-2.6,9.8-2.4c-0.7,0.8-1.2,1.7-1.5,2.7c0.5,0.4,1.2,0.6,1.8,0.6c1.1-2.5,1.5-3.4,1.7-6.2c1.8-0.1,2.7-1.2,4.4-1.6
                s3.6,0.2,5.4-0.1c3.7-0.5,6-2.9,9.3-4.4c-0.2-0.7,0-1.4-0.5-2.1c1.1-1.2,5.1-2.6,6.5-3.1c2.7-0.8,5.9-0.3,6.9,2.4
                c-2.2,1.5-5.6,1.6-7.6,3.1s-2.6,3.9-4.9,6c-3.3,3.1-8.6,7.8-8.6,12.7c0,1.2,0.7,2.4,0.3,3.8c-0.3,1.1-2.2,2.9-2.1,3.7
                c0.3,2.4,1.9,0.2,2.8,0.9c1.1,0.9,1.2,2.2,1.8,3.5c1,2.4,3.3,4.9,4.1,7.4c0.7,2.3-0.8,4.9,0.7,6.8c1.6,1.9,6.9,3.8,9.3,3.8
                c1.3-2.6,2.7,0,4,0.1c1.4,0.1,2.5-1.1,4.1-0.9c2.8,0.3,7.3,4.4,9.3,6.1c1,0.9,3.2,3.8,4.4,3.9c0.9,0.1,1.5-1.3,2.5-1.3
                c1.3,0,1.7,1.1,2.8,1.3c1.9,0.3,3.1-0.7,5-1c1.6-0.2,3.3,0.6,5,0c0.3,2.3,3.7,2.6,3.5,5.3c-0.2,2.1-3.8,4.6-5.9,4.4
                c-1,2,0.4,2.2,0.6,3.4c0.2,1.6-0.1,3-0.1,4.6c0,2.7,0,6.3,0.9,9.1c0.3,1,1.7,1.7,1.7,3.4c0,1.4-0.7,2.5-1.3,3.8
                c-0.5,0.9-2.2,2.8-1.6,4.1c0.6,1.3,1.8,1.2,2.8,0c3.1,2.5,3.2,2.8,3.7,6.8c0.2,2.2,0.8,4.8,0.6,7.5c-1.2-1.8-1.4-6.2-3-7.5
                c-2.4-2-4.4,0.7-6.6,1c-1.4,0.2-2.5-0.4-4-0.1c-1.1,0.3-2.3,1.1-3.6,1.3c-2.9,0.4-6.1-0.6-9,0.3c-0.4,1.3-0.5,3.2,0.3,4.4
                c0.9,1.3,2,0.5,2.8,1.2c1.4,1.3,3,4.1,1,5.3c1.2,0,2.2,0.4,2.7,1.3c-3.3,2.7-2.9-0.6-5.4-0.4c-1,0.1-2,1.8-2.7,2.3
                c-1.9,1.4-1.4-1-2,1.8c-0.7,3.6,1.5,3.9,3.5,5.6c1.7,1.5,2.5,4.1,3,6.1c1.6,5.7,1.1,14-2,19c-1.6,2.5-1.6,3.7-2.2,6.6
                c-0.4,1.7-1,5.1-2.9,6c0-0.6-0.5-1.7-0.4-2.5c-1.7-0.3-2.6,0.6-4.3,0.5c-0.9-0.9-0.1-0.8-1.6-1.3c1.7-3.6,5.5-8.1,5.9-12.1
                c-0.4,0.2-1,0.2-1.5,0.6c-1.2-1.6-1.8-2.9-3.8-4c-0.3,0.4-0.9,0.8-1.2,1.1c-0.2-3.1-2.9-0.9-4.7-0.5c-1.4,0.3-1.1,0.3-3,0
                c-1.4-0.2-2.2-0.9-3.7-0.7c-1.7,0.3-2.8,1.8-4.6,1.8c-0.6,0-2.4-0.6-3.2-0.6c-1.6,0-5.4,1.5-5.3-1.2c2.3-0.8,1.8-2,0.6-3.4
                c-0.3-0.4-1.9-0.1-2.1-0.4c-0.7-0.9,0-1.9-0.4-2.8c-0.6-1.5-0.8-2.6-2.5-3.5s-3.2,0.1-4.6-1.4c0.2,0.1,0.5,0.3,0.7,0.3
                c-1.5-1.2-2.4-1.9-3.3-3.5c-1-1.7-1.3-3.8-3.2-4.9c-3.1-1.9-7.2-0.9-9.5-4.4c0.3-0.1,0.8-0.3,1.1-0.4c-1.7-1-10.7-3.4-8.1,1.6
                c-1.5-0.3-3.2-0.1-4.6-0.7c-1.3-0.5-1.9-1.9-3.5-2.4c-1-0.3-3.6,0.5-4.4,0c-1.8-1.4,0.8-2.7,0-4c-0.8-1.4-2.9-0.8-4.1-1.2
                c-1-0.4-2.7-1.5-3.7-2c-2-1.3-4-4.5-6.5-4.7c0.8,1-0.4,0.8-0.4,1.6"/>
        </g>
    </g>
</g>
</svg>

@导入url（'https://fonts.googleapis.com/css?family=Lato');
.st0{fill:#ECF0F1；}
.st1{fill:none；}
.st2{填充：#34495E；笔划：#34495E；笔划宽度：0.25；笔划斜接限制：10；}
.st3{'Lato'，sans serif；}
.st4{字体大小：35px；}
.st5{填充：无；笔划：34495E；笔划宽度：3；笔划斜接限制：10；}
.st6{font-weight:'lighter'；}
.st7{fill:#34495E；}
刽子手游戏
哥伦比亚信息图形

注意，SVG是Illustrator生成的，然后我更改了样式，并在样式括号中添加了google字体。XML标记一开始有什么问题吗

---

您只是在

.st3

类中缺少了

字体系列

应该是

.st3{font-family:'Lato', sans-serif;}

而不是

.st3{'Lato', sans-serif;}



@导入url（'https://fonts.googleapis.com/css?family=Lato');
.st0{fill:#ECF0F1；}
.st1{fill:none；}
.st2{填充：#34495E；笔划：#34495E；笔划宽度：0.25；笔划斜接限制：10；}
.st3{字体系列：'Lato'，无衬线；}
.st4{字体大小：35px；}
.st5{填充：无；笔划：34495E；笔划宽度：3；笔划斜接限制：10；}
.st6{font-weight:'lighter'；}
.st7{fill:#34495E；}
刽子手游戏
哥伦比亚信息图形
您在
.st3
类中缺少
字体系列

应该是

.st3{font-family:'Lato', sans-serif;}

而不是

.st3{'Lato', sans-serif;}



@导入url（'https://fonts.googleapis.com/css?family=Lato');
.st0{fill:#ECF0F1；}
.st1{fill:none；}
.st2{填充：#34495E；笔划：#34495E；笔划宽度：0.25；笔划斜接限制：10；}
.st3{字体系列：'Lato'，无衬线；}
.st4{字体大小：35px；}
.st5{填充：无；笔划：34495E；笔划宽度：3；笔划斜接限制：10；}
.st6{font-weight:'lighter'；}
.st7{fill:#34495E；}
刽子手游戏
哥伦比亚信息图形
注意：我意识到样式标记中定义的一些CSS类没有被使用，我只是在试验。注意：我意识到样式标记中定义的一些CSS类没有被使用，我只是在试验。添加字体系列有效，谢谢。但我还有一个大问题。Lato仍然不显示在浏览器中，只有sans serif显示。当代码截取在上面运行时，Lato正在显示。伙计，这很难。@InspectorDanno您使用的浏览器是什么？下面是一个例子，我知道它在代码段中工作的原因是SVG在页面中是内联的。我猜您正在将SVG用作由
（或
背景图像
）引用的独立图像。我说得对吗？如果是这样的话，请阅读以下答案：你完全正确！我搜索了几个小时，对独立想象问题一无所知。对象标签对我来说工作得很好。你知道这是否适用于所有现代浏览器吗？添加字体系列有效，谢谢。但我还有一个大问题。Lato仍然不显示在浏览器中，只有sans serif显示。当代码截取在上面运行时，Lato正在显示。伙计，这很难。@InspectorDanno您使用的浏览器是什么？下面是一个例子，我知道它在代码段中工作的原因是SVG在页面中是内联的。我猜您正在将SVG用作由
（或
背景图像
）引用的独立图像。我说得对吗？如果是这样的话，请阅读以下答案：你完全正确！我搜索了几个小时，对独立想象问题一无所知。对象标签对我来说工作得很好。你知道这是否适用于所有现代浏览器吗？