为何SVG Logo中使用Google Fonts的文字在网页上无法正常渲染？

• 用<img>标签嵌入SVG时，SVG处于独立的沙箱环境，浏览器会阻止它加载外部资源（比如你通过@import引入的字体），这是浏览器的安全限制。
• 你给<img>添加的font-family样式完全无效，因为<img>是替换元素，内部SVG的样式只由自身代码控制，不受外部CSS影响。

1. 直接内联SVG到HTML #

把SVG代码直接写入HTML文件，不再用<img>引用，这样SVG可以共享页面的字体资源：

• 在页面头部引入Titan One字体：

<style>
  @import url('https://fonts.googleapis.com/css2?family=Titan+One');
</style>

• 把SVG代码直接放在需要显示Logo的位置：

<svg xmlns="http://www.w3.org/2000/svg" width="140" height="120" viewBox="0 0 240 56">
  <text fill="#fac31e" font-size="3em" font-family="Titan One" x="1" y="45">MyLogo</text>
</svg>

2. 将字体嵌入SVG内部 #

把Titan One字体转换成base64编码，直接写入SVG的样式中，让SVG不依赖外部资源：

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="56" viewBox="0 0 240 56">
  <style>
    @font-face {
      font-family: 'Titan One';
      font-weight: 400;
      font-style: normal;
      src: url(data:font/woff2;base64,[替换为Titan One字体的base64编码]) format('woff2');
    }
  </style>
  <text fill="#fac31e" font-size="3em" font-family="Titan One" x="1" y="45">MyLogo</text>
</svg>

你可以用在线工具将字体文件转为base64编码，这样无论用<img>还是其他方式引入SVG，字体都能正常显示。

3. 用<object>标签替代<img> #

<object>标签允许SVG加载外部资源，替代<img>即可：

<object class="logo" data="/img/my-logo.svg" type="image/svg+xml" width="140" height="120">
  <img src="/img/my-logo.svg" alt="My Logo" width="140" height="120">
</object>

注意要确保服务器正确设置SVG的MIME类型为image/svg+xml。

内容的提问来源于stack exchange，提问作者TJ1