仅包含部分真棒字体

Question

我需要超棒的字体才能带有微调图标。

我可以包括整个字体库。但是，对于一个图标而言，这岂不是过大吗？有没有办法只包含一个图标或组件？问题似乎是该库未模块化为不同的文件。例如，如果使用scss，则所有图标都位于_icons.scss文件中，而不是每个图标都位于其自己的文件中。如果使用纯CSS，则所有内容都在一个文件中。

Answer 1

你不能 字体是单个文件，非常类似于图像或文档。不管如何在CSS中包括它-用户仍将下载整个字体文件。CSS定义仅使字体在您的网站上可用。

您可以做一些事情来替代。有一些公司允许您使用自定义应用程序生成部分字体集（例如https://icomoon.io/）。那可能适合您的需求。但是，一旦创建了字体的自定义版本，它仍然是一个无法拆分的文件。不过，icomoon的自定义版本可能非常小且精简，很可能适合您描述的场景。

另一种选择是不自己托管字体，而是使用用户可能会缓存的基于云的字体。这本身不是一个解决方案，但是会增加您的用户不必下载专门用于您网站的字体的机会。

Answer 2

Font Awesome v5 支持部分样式，在getting-started页面（https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use）中，您可以包含此基本文件第一的：

<link href=/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet">

然后，您可以包括其中一项或多项：

<link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet">
<link href="/your-path-to-fontawesome/css/regular.css" rel="stylesheet">
<link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet">

Answer 3

现在您可以使用他们的JS API，它将仅加载选定的 SVG 文件。这极大地降低了捆绑包的大小。

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icon

进而

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icon

import { library, dom } from '@fortawesome/fontawesome-svg-core'
import { faCamera } from '@fortawesome/free-solid-svg-icons'

library.add(faCamera)
dom.watch()