Wordpress中的SVG字母间距

我在客户的Wordpress网站上添加了一个SVG图形。然而，图形中有奇怪的空格…字母聚在一起，在某些情况下，字母之间有很大的空格。老实说，除了SVG文件的可伸缩性外，我对SVG文件了解不多。这个问题似乎只影响文本。你有没有想过为什么会这样

---

首先，让事情更容易理解：SVG文件格式是一种XML方言，就像HTML一样。您可以在任何文本编辑器中打开和编辑它，或者使用PHP动态生成它。它与HTML有许多共同的特点，例如样式表的使用。如果SVG文件想要显示文本，它必须使用已安装的系统字体，或者需要在其样式表中引用webfonts

这就是这里发生的事情：您的SVG文件需要使用webfont Lato，但它没有被正确引用。因此，使用了替换字体，SVG中定义的一些字母定位调整不再起作用

webfont实际上在主网站中被引用，但SVG文件无法访问该定义。它们的样式表彼此独立

为了解决这个问题，我给你两个解决方案。选择一个你觉得舒服的

1。将SVG文件内联写入网页

SVG文件的源代码可以（或多或少保持不变）写入HTML文件的中间。通过这种方式，SVG内容可以访问页面的样式表，从而访问webfonts

请注意，所有样式表都适用，因此可能会发生由于不幸的命名冲突，SVG内容的某些方面可能会改变它们的外观。坦白地说，你得试试

为了实现内联嵌入，幸运的是有Worpress插件。一个快速搜索显示，但可能还有其他。有了这个插件，您只需将一个类

样式svg

添加到图像标记中，插件就会将它替换为内联svg内容。请注意，我还没有测试它

2。将webfont添加到SVG文件中

为此，您必须在自己选择的编辑器中打开SVG文件。不幸的是，该文件有些压缩，并且没有任何换行符。如果它写得很漂亮，前几行应该是这样的：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 287.76 187.31" />
  <defs>
   <style>...</style>
 </defs>

...

在打开的

标记之后和

标记之前添加以下内容：

<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic&#038;subset=latin,latin-ext" type="text/css" />

您可以发布或链接SVG文件的源代码，或者至少是摘录吗？没有任何源代码。我只是把它添加到Wordpress网站上，就像其他任何图形一样。这里有一个网站链接：www.johnandersonlaw.com。谢谢你看。