SVG徽标在移动设备上的字体与台式机上的字体不同

Question

This SVG logo在桌面浏览器（如Mac上的Chrome）上看起来正确：

在桌面上正确显示的徽标使用无衬线字体的单词“ Hosting”。

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

我需要怎么做才能在移动设备上和在台式机上一样显示徽标，以便“托管”一词是sans-serif？

编辑：“托管”一词不是由徽标的其余部分生成的，而是<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属性。