SVG 徽标在移动设备上的字体与桌面不同

Question

This SVG logo 在 Mac 上的 Chrome 等桌面浏览器上看起来是正确的：

桌面上正确显示的徽标具有无衬线字体的“Hosting”字样。

但在 iPhone 5 和 7 上，“Hosting”一词是衬线字体：

我需要做什么才能在移动设备上显示与桌面相同的徽标，以便“托管”一词是无衬线的？

编辑：“hosting”这个词不是像标志的其余部分那样由路径产生，它是一个<text transform="matrix(1 0 0 1 96.9229 18.4597)" class="st2 st3 st4">hosting</text>。

如何确保文字宿主是由 Illustrator 中的路径生成的？

Answer 1

我建议在路径上使用<text>，因为您可以更改其中的文本，而且我认为它会解压缩文件大小（对此不确定）。

您可以为文本添加样式，使其可以是您拥有的任何字体。只需将font-family:Sans Serif; 应用于您的<text> 元素、class 属性或id 属性。

Answer 2

我在 .ai 文件中看到文本没有被转换为路径。

Type > Create Outlines > Export to SVG 删除了 SVG 中的所有文本。