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

Question

这个 SVG 标志在桌面浏览器（如 Mac 上的 Chrome）上看起来是正确的：

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

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

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

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

如何确保单词托管是由 Illustrator 中的路径生成的？

Answer 1

我在 .ai 文件中看到文本尚未转换为路径。

类型 > 创建轮廓 > 导出到 SVG 从 SVG 中删除了所有文本。

Answer 2

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

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