内联 CSS 问题答案

【问题标题】：inlining CSS issues内联 CSS 问题
【发布时间】：2013-05-30 09:38:52
【问题描述】：

我正在尝试使我的 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">

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

【问题讨论】：

提供问题的链接。
"inline" 如style="" 或<style>...</style> ?
如。恐怕我没有链接，因为它在我的本地机器上。
是的，和亚历克斯一样的问题。您可以将该代码放在页面上的 style 标记内，但不能放在元素的样式属性内——这无论如何都是一种低效的 CSS 实现方式。
您确定字体文件的路径正确吗？请记住，外部样式表中的路径是相对于该样式表的位置的，而在<style> 中，路径将被视为相对于 HTML 文档的位置。

标签： html css

【解决方案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;
}

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

【讨论】：

【解决方案2】：

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

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

【讨论】：