html - 内联 CSS 问题

Question

我正在尝试使我的 CSS 内联，但这给了我一些问题。我正在使用 font-awesome，并且我有:

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

在 CSS 中。所以当它被内联时，它不起作用(我在页面上看不到任何图标)。这是否意味着我不能内联执行此操作？

附加信息:

html:

<style type="text/css">
@font-face {
  font-family: 'FontAwesome';
  src: url('font/fontawesome-webfont.eot');
  src: url('font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('font/fontawesome-webfont.woff') format('woff'), url('font/fontawesome-webfont.ttf') format('truetype'), url('font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

.icon-wrench:before {
  content: "\f0ad";
}
</style>

<i class="icon-wrench"></i>

当我像这样链接到样式表时它显示正确:

<link href="style.css" rel="stylesheet">

但不是，用上面介绍的方法好像是。

Answer 1

试试这个:

@font-face {
    font-family: 'FontAwesome';
    src: url('font/fontawesome-webfont.eot');
    src: local('☺'), url('font/fontawesome-webfont.woff') format('woff'), url('font/fontawesome-webfont.ttf') format('truetype'), url('font/fontawesome-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

我使用它，它适用于所有浏览器。