在 SVG 中使用 Google 字体？答案

【问题标题】：Using Google Font in SVG?在 SVG 中使用 Google 字体？
【发布时间】：2018-06-12 14:50:53
【问题描述】：

让我的 SVG 显示 Google 字体 Lato 时遇到了很多麻烦。我阅读了有关此的类似问题，并尝试实施我学到的东西。值得一提的是，字体确实显示在我的计算机上（因为我安装了 Google 字体），但它没有在其他地方显示。

<?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>

注意，SVG 是由 Illustrator 生成的，然后我更改了样式并在样式括号中添加了 google 字体。开头的 XML 标签有问题吗？

https://jsfiddle.net/8h14px69/

【问题讨论】：

注意：我意识到 style 标签中定义的一些 CSS 类没有被使用，我只是在试验。

标签： css svg fonts google-font-api

【解决方案1】：

您只是在.st3 类中缺少font-family。

应该是

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

而不是

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

<?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{font-family:'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>

【讨论】：

添加字体系列工作，谢谢。但我还有另一个大问题。 Lato 仍然没有显示在浏览器中，只有 sans-serif 显示。不过，当代码截图在上面运行时，Lato 会显示。伙计，这是一个艰难的过程。
@InspectorDanno 您使用的是哪些浏览器？
这是我的一个例子github.com/inspectordanno/inspectordanno.github.io/blob/master/…
它在 sn-p 中工作的原因是因为 SVG 在页面中是内联的。我猜您将 SVG 用作由 <img>（或 background-image）引用的独立图像。我对吗？如果是这样，请阅读此答案：stackoverflow.com/questions/20577316/…
你完全正确！我一直在寻找这个几个小时，并且不知道独立的想象问题。对象标签对我来说工作得很好。你知道这是否适用于所有现代浏览器吗？