如何将 URL 中的 font-family 名称定义为 SVG 字体？

Question

包含 webfonts 的推荐代码似乎是：

@font-face {
    font-family: 'my_font';
    src: url('my-font.eot');
    src: url('my-font.eot?#iefix') format('embedded-opentype'),
         url('my-font.woff2') format('woff2'),
         url('my-font.woff') format('woff'),
         url('my-font.ttf') format('truetype'),
         url('my-font.svg#my_font') format('svg');
    font-weight: normal;
    font-style: normal;
}

您可能会注意到，字体系列的名称在 URL 中重复指向 SVG 字体：

font-family: 'my_font';                    <= "my_font"
url('my-font.svg#my_font') format('svg');  <= "my_font"

现在我不喜欢我的字体名称是小写的并且包含下划线。我希望它是 "My Font":

font-family: 'My Font';

但是，我需要如何在 SVG 中定义字体系列名称 url？

url('my-font.svg#My Font') format('svg');
url('my-font.svg#My%20Font') format('svg');
url('my-font.svg#my_font') format('svg');

那个 URL 中的字体系列名称的用途是什么？

问完这个问题，我了解到：

一个。 TTF and WOFF are supported by all current browsers except Opera Mini (and Opera Mini doesn't support SVG fonts either), 所以当前的浏览器都不需要 SVG 字体。

b。 Fonts have been dropped from the SVG2.2 specification 2015 年 9 月。

因此，我已从我的网站中删除了 SVG 字体，并从上面作为示例给出的代码中删除了相关行。因此，我的问题已过时且不再相关。

Answer 1

url('my-font.svg#my_font') 中使用的 IRI 方案称为 funcIRI，它实际上指向 my-font.svg 文档中具有 id my_font 的元素。

我认为您可以在 font-family 属性中随意命名您的字体，只要您在 src 中指向正确的字体 IRI。

（如果是 SVG 字体，它需要指向 <font> 元素。）

Mozilla Developer Network 上的 SVG fonts tutorial 提供了以下示例：

<font id="Super_Sans">
  <!-- and so on -->
</font>

<style type="text/css">
@font-face {
  font-family: "Super Sans";
  src: url(#Super_Sans);
}
</style>

<text font-family="Super Sans">My text uses Super Sans</text>

如何将 URL 中的 font-family 名称定义为 SVG 字体？

How to define the font-family name in the URL to the SVG font?

css

svg

webfonts