将 Google 字体与 SVG <object> 结合使用答案

【问题标题】：Using Google Fonts with SVG <object>将 Google 字体与 SVG <object> 结合使用
【发布时间】：2016-07-15 05:13:29
【问题描述】：

我在我的页面中嵌入了带有 <object> 标签的 SVG，它们应该使用 Google 字体（例如 Roboto）。但是，SVG 不会选择这些字体，而是默认使用系统字体。

我做错了什么？是否每个 SVG 都要求字体本身嵌入在 <style> 中？

示例代码：

<head>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
</head>

<body>
    <object width="250" height="200" type="image/svg+xml" data="img/popup_image.svg"></object>
</body>

SVG sn-p：

<text font-size="14" fill="#333" font-family="Roboto">Words go here</text>

【问题讨论】：

你的代码是什么样子的？
我不确定我是否理解您的问题。正如我所说，它使用 object 标签来显示 SVG，并且 SVG 引用 Google Fonts 的属性。如果我不清楚，我会在上面更新我的问题。
不，这行不通....这就像尝试使用 CSS 更改 image 中的字体...不会发生。如果 SVG 是 inline 它可能会。
您需要将链接元素放在与 svg 相同的文件中，即在 popup_image.svg 中
@RobertLongson 这完全是错误的。

标签： html css svg fonts

【解决方案1】：

Kyle 的回答很棒，但对我来说不太有效，但它引导我找到了正确的答案：

如果页面上已有字体，可以将字体定义为`local`

@font-face {
  font-family: 'Bitter';
  src: local('Bitter');
}

我正在创建一个网站，我已经在使用某些字体并且无法加载它们，但理想情况下我什至不必加载它们，因为它们已经加载。这个解决方案非常适合我。

【讨论】：

【解决方案2】：

一些建议如果您想让您的徽标可移植和离线使用，您应该使用并嵌入尽可能小的字体版本。

首先，优化字体大小，只拉入您实际需要的笔画粗细和字符。

所以不要这样：

@987654321@

压缩选项并添加 ?text=abc 参数以仅获取字形的子集，如下所示：

@987654322@

在您的 svg 中，您可以在样式表中的 <defs> 标记中包含 @font-face 声明，如下所示：

<defs>
  <style>
    @font-face {
      font-family: "Sample font";
      src: url("data:application/font-woff;charset=utf-8;base64,<b64>") format("woff2");
    }
  </style>
</defs>

通过导航到 google 字体样式表并下载实际的 .woff2 文件来获取文件。您可以使用 base64-encoder 将其转换为 b64 字符串，或在 Converting and rendering web fonts to base64 阅读更多内容。获取该字符串并将其包含在您的文件中。为清楚起见，您还可以在 font-face 上指定 unicode range 以明确表示您只输入了一些字符

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     viewBox="0 0 280 140" width="300">

  <defs>

    <style>
      /* https://fonts.googleapis.com/css?family=Patrick+Hand&text=KAM */
      @font-face {
        font-family: 'Patrick Hand';
        /* src: url(https://fonts.gstatic.com/l/font?kit=LDI1apSQOAYtSuYWp8ZhfYeMXNDN0vF8&skey=7fb0ea6515a61339&v=v11) format('woff2') */
        src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff2');
        unicode-range: U+004B, U+0041, U+004D
      }
      text { 
        font-size: 140px;
        font-family: 'Patrick Hand', cursive;
        font-weight: 700; 
      }
    </style>
  </defs> 

    <text x="51"  y="132" rotate="-30">K</text>
    <text x="100" y="100" rotate="0">A</text>
    <text x="150" y="95"  rotate="30">M</text>

</svg>

另见：

How do I embed Google Web Fonts into an SVG?

【讨论】：

字体在ie或edge中仍然无法正确显示。它在这些浏览器中默认使用不同的字体。有解决办法吗？
@theyuv，上面的sn -p 只内联woff2的字体文件，IE11不支持。您可以添加对 other font formats 的后备支持以实现旧版兼容性

【解决方案3】：

浏览器将 SVG 文本视为常规 HTML 文本。换句话说，SVG 中的任何文本元素都必须像普通 HTML 元素一样设置样式（例如，<span>）。您需要以 CSS @import 的形式将字体嵌入到 SVG 中。查看 SVG 的 XML 中的 <defs> 部分。然后，添加以下代码：

<defs>
  <style type="text/css">
    @import url('https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic');
 </style>
</defs>

接下来，将您的 <text> 元素更新为如下所示：

<text font-size="14" fill="#333" style="font-family: 'Roboto';">
   Words go here
</text>

如果您想了解更多信息，可以试试这个网站：http://nimbupani.com/about-fonts-in-svg.html。它有一些关于嵌入式 SVG 字体的非常好的信息。可以在此处找到一个工作示例：https://github.com/marians/test-webfonts-in-svg。

【讨论】：

感谢您的努力，但不幸的是，这并没有像我希望的那样奏效。
看起来你很亲密！做@import url:() 似乎正在工作......不过仍在测试。
不需要CDATA。只需使用：@import url('https://fonts.googleapis.com/css?family=Sonsie+One');。可以在此处找到一个工作示例比较：github.com/marians/test-webfonts-in-svg
似乎不再起作用，在 github 上检查了您的示例。
这是很好的解决方案，它的工作原理，但是当我在 html 中获取 svg 文件时字体不起作用。你有什么解决办法吗？

如果页面上已有字体，可以将字体定义为local

如果页面上已有字体，可以将字体定义为`local`