如何为导入的 ccs 库添加样式？答案

【问题标题】：How to add style to imported ccs library?如何为导入的 ccs 库添加样式？
【发布时间】：2020-06-06 23:21:24
【问题描述】：

我尝试改进我的网站https://agariogame.club/ 的 GooglePageSpeed，但我遇到了一个问题（避免显示不可见的文本）。问题出在我使用的库中。我使用 Cloudflare 的代码。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

给solve这个问题我需要把这个添加到库中。

font-display: swap;

这个库使用我有问题的字体。

如何添加“字体显示：交换；”解决问题？

我有解决方法的建议。只需下载并修复它，在本地使用。但它会降低性能。

【问题讨论】：

只需在主文档 101 中用您自己的代码覆盖不需要的代码。您是否已经尝试过？
我在 index.html 旁边添加了 <style> @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'); font-display: swap !important; } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 但这没有帮助。你有什么想法吗？
如果您的问题仍然存在，您将需要从您自己的服务器提供 FontAwsome，并使用修改后的font-awesome.min.css。很多公司/人都这样做。更好的是：转到icomoon.io 创建一个仅包含您需要的图标的小字体文件并从您的服务器提供该文件，它将更小、更快。这将是推荐的方式。哦，刚刚看到，移动 <link> loading FontAwsome before 你的风格。现在它会覆盖您的修改，因为您在文档样式之后加载它。
我已将移至
推荐的解决方案始终是（始终）创建您需要的图标的一小部分并自己提供该版本（包括较小的 css）。

【解决方案1】：

您可以下载 font-awesome 的桌面版本并使用它。它还将提高速度，因为您只能以 SVG 方式使用您想要的图标。

为此，您需要添加名为 all.min.css 的 CSS 文件（这将与 font-awesome 的下载一起提供）。 all.min.css 文件应位于名为 css 的文件夹中，并且在该文件夹之外，您应该有另一个名为 webfonts 的文件夹（您将通过字体真棒下载获得它）。

要下载访问：https://fontawesome.com/download 在首页上，您将获得两个下载选项，一个用于网络/下载，第二个用于桌面。您将下载网络版本。桌面版仅包含 SVG。您将获得一个 zip 文件，其中包含您需要的所有文件。

文件夹放置：

主文件夹 --

文件夹 1 - css: Files(1): all.min.css

文件夹 2 - webfonts：文件（15）：......

【讨论】：

谢谢，这对我有用！我按照你说的做了，但是all.min.css 使用像fa-brands-400.woff2 这样的大字体集合。我怎样才能只使用特定的 SVG？我应该在我的 css 中写什么？
为此下载另一个文件——桌面版本。您将获得所有 svg，然后您可以使用 <img> 标签添加它们。并通过 CSS 赋予它们高度和宽度。
这样你就可以在你的电脑上获得 font-awesome as SVG 上的所有免费图标。
非常感谢！