SVG字母间距在Wordpress中

Question

我在客户的Wordpress网站上添加了一个SVG图形。然而，图形中有奇怪的空间......字母聚集在一起，在某些情况下，字母之间有大的空格。说实话，除了扩展性好之外，我不太了解SVG文件。问题似乎只影响文本。有关为何发生这种情况的任何想法？

Answer 1

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

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

webfont实际上是在主网站中引用的，但SVG文件无权访问该定义。他们的样式表彼此隔离。

要解决这个问题，我会给你两个解决方案。选择你觉得舒服的那个。

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

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

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

为了实现内联嵌入，幸运的是有Worpress插件。快速搜索显示SVG Support，但可能还有其他人。使用此插件，您只需在图像标记中添加一个类style-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>

在打开<defs>标记之后和<style>标记之前添加以下内容：

<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" />