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;
}

正如您所注意到的，在指向SVG字体的URL中重复了字体系列的名称：

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

现在我不喜欢我的字体名称是小写的，包括下划线。我希望它是＆＃34;我的字体＆＃34;：

font-family: 'My Font';

但是，我如何在SVG网址中定义字体系列名称？

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中字体系列名称的目的是什么？

在提出这个问题后，我了解到：

一个。除了Opera Mini（和TTF）之外的所有当前浏览器都支持WOFF和Opera Mini doesn't support SVG fonts either，因此当前浏览器不需要SVG字体。

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

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

Answer 1

my_font中使用的IRI方案称为funcIRI，它实际上指向my-font.svg文档中具有标识font-family的元素。

我认为你可以在src属性中为你想要的字体命名，只要你指向<font id="Super_Sans">  </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>中的正确字体IRI。

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

Mozilla开发者网络上的SVG fonts tutorial提供了以下示例：

null

如何在SVG字体的URL中定义字体系列名称？

1 个答案: