Question

我想在HTML文件中使用Font Awesome中的单个字形。我想创建没有外部依赖关系的HTML文件，所以我希望style @font-face声明和字符的SVG定义是HTML文件的组成部分。

以下是我尝试过的内容（jsfiddle），但自定义字形未显示：

<!DOCTYPE html>
<head>
  <style>
    @font-face {
      font-family: "Custom";
      src: local("Custom"), url("fonts.svg#font") format("svg");
    }
    a {
      text-decoration: none;
      font-family: Custom;
    }
  </style>  
</head>

<body>
<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  display="none">

  <defs>
    <font id="font">
      <font-face font-family="Custom" />
      <glyph
        glyph-name="undo"
        unicode="@"
        d="m857 350q0-87-34-166t-91-137-137-92-166-34q-96 0-183 41t-147 114q-4 6-4 13t5 11l76 77q6 5 14 5 9-1 13-7 41-53 100-82t126-29q58 0 110 23t92 61 61 91 22 111-22 111-61 91-92 61-110 23q-55 0-105-20t-90-57l77-77q17-16 8-38-10-23-33-23h-250q-15 0-25 11t-11 25v250q0 24 22 33 22 10 39-8l72-72q60 57 137 88t159 31q87 0 166-34t137-92 91-137 34-166z" horiz-adv-x="857.1" />
    </font>
  </defs>
</svg>

<a href="#undo">@</a>
</body>
</html>

我有什么遗漏或错误？或者我是否尝试做一些不受支持的事情？

Answer 1

您使用什么浏览器来执行此操作？你的小提琴在Safari中运行良好。

通过https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_fonts

从MDN查看此信息

目前仅在Safari和Android浏览器中支持SVG字体。 Internet Explorer没有考虑实现这个，功能已从Chrome 38（和Opera 25）中删除 Firefox已无限期推迟其实施以集中精力在WOFF上。其他工具，如Adobe SVG Viewer插件，Batik 和部分Inkscape支持SVG字体嵌入

将SVG字体字形嵌入独立的HTML文件中

1 个答案: