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

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

Answer 2

您确定字体文件的路径是否正确？

请记住，外部样式表中的路径与该样式表的位置相关，而在<style>中，路径将被视为相对于HTML文档的位置。

内联CSS问题

2 个答案: