如何让 Google 字体在内联 SVG 中工作？

Question

这是我的 HTML 文档的一个非常简化的版本。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
</head>
<body>
 <div style=" width:256px; height:256px; margin:20px auto; ">

  <svg id="artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 256 256">
   <style type="text/css"> /*internal CSS of the inline SVG*/
    /* <![CDATA[ */
    @font-face {
     font-family: "M PLUS 1p";
     src: url('https://fonts.googleapis.com/css?family=M+PLUS+1p');
    }
    /* ]]> */
   </style>

   <a xlink:href="#">
    <circle cx="57" cy="57" r="54.5" fill="#767dcc"/>
    <text transform="translate(33.916 87)" font-size="90" font-family="M PLUS 1p">1</text>
   </a>
  </svg>

 </div>

</body>
</html>

具体我关心的是这部分：

@font-face {
  font-family: "M PLUS 1p";
  src: url('https://fonts.googleapis.com/css?family=M+PLUS+1p');
}

...这部分：

font-family="M PLUS 1p"

它使用浏览器的默认字体呈现“1”，如下所示：

^{以上截图来自 Firefox}

字体Mplus 1p的“1”字形实际上是这样的：

^{以上截图来自TextEdit}

我一直在研究 , which has two answers. When I use the method recommended in 如果我使用该答案中推荐的字体，它会起作用，但不会与我尝试使用的字体一起使用。

@import url('https://fonts.googleapis.com/css?family=M PLUS 1p');

^ 这没用。

似乎是一种更合理的方法，因为 font-family 可以轻松定义和重用。

我正在使用 Google 提供的 link，但它不起作用：

https://fonts.googleapis.com/css?family=M+PLUS+1p

看到 Google 的 URL 将 space 字符替换为 + 我认为以下可能有效：

@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p');

但这也没有奏效。这是我最新的成果：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
</head>
<body>
 <div style=" width:256px; height:256px; margin:20px auto; ">

  <svg id="artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 256 256">
   <defs>
    <style type="text/css"> /*internal CSS of the inline SVG*/
       /* <![CDATA[ */
       @import url('https://fonts.googleapis.com/css?family=M+PLUS+1p:400');
       /* ]]> */
    </style>
   </defs>

   <a xlink:href="#">
    <circle cx="57" cy="57" r="54.5" fill="#767dcc"/>
    <text transform="translate(33.916 87)" font-size="90" font-family="M PLUS 1p">1</text>
   </a>
  </svg>

 </div>

</body>
</html>

这可能是一个语法问题的问题，但我无法确定。

Answer 1

正确的方法是使用 @import url('https://fonts.googleapis.com/css?family=M PLUS 1p'); 并在 css 中设置你的 font-family

text {
   font-family: 'M PLUS 1p';
}

内联 font-family 只是行不通。我不确定它是否有效属性或

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <div style=" width:256px; height:256px; margin:20px auto; ">

    <svg id="artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 256 256">
   <style type="text/css"> 
        @import url('https://fonts.googleapis.com/css?family=M+PLUS+1p');
        text {
          font-family: 'M PLUS 1p';
        }
   </style>

   <a xlink:href="#">
    <circle cx="57" cy="57" r="54.5" fill="#767dcc"/>
    <text transform="translate(33.916 87)" font-size="90" font-family="M PLUS 1p">1</text>
   </a>
  </svg>

  </div>

</body>

</html>

如何让 Google 字体在内联 SVG 中工作？

How to get a Google Font working inside an inline SVG?

css

svg

google-fonts