单个便携式 HTML 文件中的 Font Awesome 内联

Question

我有一个 HTML 文件，它应该是可移植的，就像在 HTML 文件中一样，没有别的。这意味着我通常会在他们的内容中内联所有 styles/scripts 并且效果很好。如果我想保持 HTML 干净，我通常 link 到 CDN 内容，但通常是为了离线使用，我嵌入了所有内容。所有要包含的 CSS/All JS 直接进入 header/footer/body.

我对 Font Awesome 做了完全相同的事情，这有点问题，因为除了 CSS 文件，我需要将通常位于它们旁边的 woff/woff2 字体文件转换为二进制表示.

这是它通常的样子：

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../webfonts/fa-brands-400.eot");
  src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

.fab {
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../webfonts/fa-regular-400.eot");
  src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../webfonts/fa-solid-900.eot");
  src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }

这是它的二进制表示（因为它很大，所以只有几行）

@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("../webfonts/fa-solid-900.eot?");
    src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAATmsAA0AAAADHuwAATlSAUuFYAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACZThEICor0YIjOQAE2AiQDnzALnzQABCAFiisH4i5bMnuSATLvp1Eyvq0KTDRu5CummzsFug2g5kWqjHSuhDve3Urk1BBxZf////+/72iIOaWzdbZjx

我跳过了包括 EOT/TTF/SVG（为他们删除了 src）并简单地替换了 WOFF2/WOFF，因为这应该足以满足现代支持。

确实如此！有用。然而只有一种方式。

<style>
    .login::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f007";
    }

    .tps::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 400;
        content: "\f1ea";
    }

    .twitter::before {
        font-family: "Font Awesome 5 Brands";
        content: "\f099";
    }
</style>
<span class="twitter"></span>

以上代码有效

<span class="fas fa-camera"></span>

以上代码无效。这是它的样子（前 3 个使用 <style> 方法）：

如果我切换到在线使用

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" as="style" type="text/css" rel="stylesheet preload prefetch" />

这两种方式都有效，这让我认为这两种使用 Font Awesome 的方式是有区别的。我尝试以第三种方式构建它，认为我可能只需要改变我定义事物的方式，但使用这样的东西并不顺利。

<span style='font-family: "Font Awesome 5 Brands"; content: "\f099"; font-weight: 400;'></span>

当我检查 all.css 的来源时，样式只定义了这个：

.fa-twitter:before {
  content: "\f099"; }

我的 3 个问题：

使用 <style></style> 的方法与使用 class“fab fa-twitter”
知道为什么这 2 个行为不同吗？
任何解决方法？

编辑：

这里是 JSFiddle 展示的例子https://jsfiddle.net/mfzvxw38/1/我知道它很长

Answer 1

您可能需要从 all.css 中复制所有要使用的 fa- 图标 class，或者将整个内容内联。

现在，您正在将这种方法与将 Font Awesome 图标应用于现有 HTML 的方法混合使用，这通常在您无法选择修改 HTML 你自己：https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

What is the difference between methods using , which basically wraps the same thing that all.css does already, and using class "fab fa-twitter"

两种情况下的结果相同，但是 Font Awesome 已经包含了您需要的 CSS classes。

您似乎正在混合使用提供的 classes（例如 fab fa-twitter）的方法，方法是内联其中的一些方法，以及编写您自己的 [=43] 的自定义方法=] classes。第二个选项适用于 you can’t modify the HTML yourself.

的情况

Any clue why it's behaving differently for those 2?

要么您还需要自定义 CSS class 相机图标（以及您想要的任何其他图标）。或者，如果您打算使用很多图标

.camera::before {
  font-family: "Font Awesome 5 Free";
  content: "\f030";
}

…或者，如果您使用许多图标或想要方便地遵循现有的 Font Awesome class 名称，您可以内联整个 all.css 文件。目前，看起来您只是内联 @font-face 声明，但如果您想在 HTML 中使用它们，您还需要所有图标 class 名称 CSS ]:

/* From https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.css */

.fa-camera:before {
  content: "\f030"; }

这与您尝试在此处添加内联的 CSS 非常相似：

<!-- From the question -->
<span style='font-family: "Font Awesome 5 Brands"; content: "\f099"; font-weight: 400;'></span>

Font Awesome 使用 CSS content property，旨在与 ::before 和 ::after 等伪元素一起使用。这在 HTML 中行不通，因为它需要应用伪元素。

希望对您有所帮助！

Answer 2

看来我犯了一个大错误，在 replacement/minification 过程中我已经崩溃了类。

如我所料

.fa-500px:before {
    content: "\f26e";
}

.fa-accessible-icon:before {
    content: "\f368";
}

.fa-accusoft:before {
    content: "\f369";
}

我在代码中实际拥有的内容（缩小后我没有通过）。

.fa-car-side:before {
    content: "ï—¤"
}

.fa-caravan:before {
    content: "ï£¿"
}

.fa-caret-down:before {
    content: "ïƒ—"
}

因此，拥有可移植的 all.css 文件是可能的，并且可以按预期工作。

单个便携式 HTML 文件中的 Font Awesome 内联

Font Awesome inline within single, portable HTML file

html

css

fonts

font-awesome