如何引用html文档中定义的svg字体

时间:2014-06-22 08:29:19

标签: css svg font-awesome

我想创建一个不依赖任何其他文件的单个文件html文档。 font-awesome包含一个svg字体,可以嵌入html文档和@ font-face中的引用。但我不知道该怎么做。

我刚刚将svg复制到了html。

<!DOCTYPE html>
<html lang="en">
<svg xmlns="http://www.w3.org/2000/svg">
  <metadata></metadata>
  <defs>
    <font id="fontawesomeregular" horiz-adv-x="1536">
      <font-face units-per-em="1792" ascent="1536" descent="-256" />
      <missing-glyph horiz-adv-x="448" />
      <glyph unicode=" " horiz-adv-x="448" />
      <glyph unicode="&#x09;" horiz-adv-x="448" />
      ....
      other more glyphs
    </font>
  </defs>
</svg>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
</head>
<body>
  <div>
    <i class="fa fa-github"></i>
  </div>
</body>

我还更改了font-awesome.css文件。将@ font-face的src属性更改为uri

@font-face {
  font-family: 'FontAwesome';
  src: uri('fonts.svg#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

但是我有一个很大的空白区域,字体很棒的图标显示为一个空白框。

现场演示:http://jsfiddle.net/tQ6LS/

0 个答案:

没有答案