7

我有一个要分发的独立 HTML 文档，没有任何外部依赖项。我在本文档中使用了一种非标准字体，只有我的一些用户会安装它。

对于那些没有安装字体的用户，我在<body>. （我在这个例子中使用了单字形字体，真正的文档使用的是完整的字体。）

<svg style="display: none;"><defs>
  <font id="MyFontElement">
    <font-face font-family="MyFont" />
    <glyph unicode="A" horiz-adv-x="950" d="M0,0L0,100L100,100L100,200L0,200L0,300L100,300L100,400L200,400L200,500L300,500L300,600L400,600L600,600L600,500L700,500L700,400L800,400L800,300L900,300L900,200L800,200L800,100L900,100L900,0L600,0L600,100L700,100L700,200L800,200L800,300L100,300L100,200L200,200L200,100L300,100L300,0L0,0M300,400L600,400L600,500L300,500L300,400Z" />    
  </font>
</defs></svg>

SVG字体看起来不如普通字体好，所以我只希望在本地没有安装字体的情况下使用SVG字体。如果字体是在外部 SVG 文档中定义的，我可以使用它的优先级低于本地安装的字体，如下所示：（小提琴）

<style>
  @font-face {
    font-family: "My Font";
    src: local("My Font"), url("fonts.svg#MyFontElement") format("svg");
  }
</style>
<p style="font: 3em 'My Font';">
    Alphabet
</p>

截屏

不幸的是，当前文档中的字体似乎都没有明显的变化：（小提琴）

  src: local("My Font"),
       url("./#MyFontElement") format("svg"),
       url("./#MyFontElement"),
       url("#MyFontElement") format("svg"),
       url("#MyFontElement");

即使没有@font-face声明，字体已经在文档中可用MyFont，font-family在<font-face />. 但是，这将比名为 的本机字体具有更高MyFont的优先级，因此它不是解决方案。

我希望我可以把它称为local("MyFont")......（小提琴）

  src: local("My Font"), /* local */
       local("MyFont"); /* embedded */

...但这也不起作用。

我可以给嵌入字体一个不同的名称并以较低的优先级使用它style="font-family: LocalFont, EmbeddedFont"，但是我允许用户将本地文件中的片段导入到文档中，并且这些本地文件将仅通过标准名称引用字体。导入这些引用时可以重写它们，但我不喜欢这种解决方案。

如何从@font-face声明中引用嵌入在当前文档中的 SVG 字体？

4

2 回答 2

5

将字体转换为数据 URI 并将其嵌入到 CSS 声明中：（小提琴）

<style>
@font-face {
  font-family: "My Font";
  src: url("data:application/octet-stream;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCIgPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+CiAgPGZvbnQgaWQ9Ik15Rm9udEVsZW1lbnQiPgogICAgPGZvbnQtZmFjZSBmb250LWZhbWlseT0iTXlGb250IiAvPgogICAgPGdseXBoIHVuaWNvZGU9IkEiIGhvcml6LWFkdi14PSI5NTAiIGQ9Ik0wLDBMMCwxMDBMMTAwLDEwMEwxMDAsMjAwTDAsMjAwTDAsMzAwTDEwMCwzMDBMMTAwLDQwMEwyMDAsNDAwTDIwMCw1MDBMMzAwLDUwMEwzMDAsNjAwTDQwMCw2MDBMNjAwLDYwMEw2MDAsNTAwTDcwMCw1MDBMNzAwLDQwMEw4MDAsNDAwTDgwMCwzMDBMOTAwLDMwMEw5MDAsMjAwTDgwMCwyMDBMODAwLDEwMEw5MDAsMTAwTDkwMCwwTDYwMCwwTDYwMCwxMDBMNzAwLDEwMEw3MDAsMjAwTDgwMCwyMDBMODAwLDMwMEwxMDAsMzAwTDEwMCwyMDBMMjAwLDIwMEwyMDAsMTAwTDMwMCwxMDBMMzAwLDBMMCwwTTMwMCw0MDBMNjAwLDQwMEw2MDAsNTAwTDMwMCw1MDBMMzAwLDQwMFoiIC8+ICAgIAogIDwvZm9udD4KPC9kZWZzPjwvc3ZnPgo=") format("svg");
}
</style>
<p style="font: 3em 'My Font';">
    Alphabet
</p>

有一个警告：您不能将 ID 说明符 ( #MyFont) 与这样的数据 URI 一起使用。因此，您在编码文件中只能有一个字体，而不是多个并单独引用它们。（不是你想要的；在每种字体的声明中复制多个嵌入字体的数据会浪费大量空间。）

于 2012-07-11T17:37:17.333 回答
1

首先在 css 中指定本地字体名称，然后是嵌入的字体名称：

p {
    font-family: MyFontLocalName, MyFontEmbeddedName;
}

http://jsfiddle.net/gilly3/xX6Bv/5/

如果MyFontLocalName安装在用户的计算机上，将使用该字体，否则MyFontEmbeddedName将使用该字体。

于 2012-07-11T17:38:37.993 回答