可以在 CSS 文件中声明 SVG 元素的字体吗？答案

【问题标题】：can fonts for SVG elements be declared in CSS file?可以在 CSS 文件中声明 SVG 元素的字体吗？
【发布时间】：2023-03-21 11:18:01
【问题描述】：

有什么方法可以为链接的 CSS 文件中的 SVG 元素定义/更改/设置字体属性？还是所有这些数据都必须固定到 SVG 文件本身中？强调“固定”。咳咳。

换句话说，执行以下操作是否有效？

SVG：

<svg>
  <g id="buttonText">
    <text id="buttonTextShadow">CLICK ME</text>
    <text id="buttonTextColor">CLICK ME</text>
  </g>
</svg>

CSS：

#buttonTextColor, #buttonTextShadow  { font-family: "OpenSans"; }
#buttonTextColor { color: #fff; }
#buttonTextShadow { color: #333; }

如果能够从样式表中定位和设置这些东西的样式会很好...如果没有，我会适应...：P

TIA！

写！

【问题讨论】：

您没有尝试过并发现它有效吗？除了颜色当然不是 SVG 使用的属性这一事实。
不。没有任何效果。我想我只是错过了一些东西，所以我来到了这里。我刚刚开始更深入地研究 SVG，所以还有很多我不知道的。而且我不想把时间浪费在我不需要的事情上。

标签： css svg fonts

【解决方案1】：

这似乎有效，如果您愿意，您可以直接定位 ids。

<svg>
  <defs>
    <style type="text/css">
      @font-face {
        font-family: "OpenSans";
        src: url('/path/to/font.woff');
      }

      #buttonText {
        font-family: "OpenSans";
      }
    </style>
  </defs>
  <g id="buttonText">
    <text id="buttonTextShadow">CLICK ME</text>
    <text id="buttonTextColor">CLICK ME</text>
  </g>
</svg>

【讨论】：

因此所有内容都必须包含在 SVG 本身中。没有外部 CSS？
您也可以在其中使用@import 语句，用于外部 Google 字体等。
！！很高兴知道。但归根结底，一切都需要在 SVG 本身内。没有外部样式表或 javascript 函数……真可惜。