前言
在前端开发中，设计师往往会提供字体文件给前端通过 CSS 引用，但如果使用的字体是开源字体，我们不仅可以通过 CSS 引用，还可以通过 npm 包的形式安装使用，这不仅可以方便我们的开发，还可以减少加载时间。本文将介绍 npm 包 ember-font-plex 的使用方法，字体文件来自于 Google Fonts 上的 IBM Plex。
安装
首先，我们需要在我们的 Ember 项目中安装 ember-font-plex 包。运行以下命令：
ember install ember-font-plex
这会将 ember-font-plex 包自动添加到项目中，并将字体文件储存到 vendor/fonts 文件夹中。
使用
在项目的样式表中引用储存在 vendor/fonts 文件夹下的字体文件。例如，在 app/styles/app.scss 中添加以下内容：
-- -------------------- ---- -------
---------- -
------------ ---- ---- ------
----------- -------
------------ -------
---- --------------------------------------- ----------------
-------------------------------------- ---------------
-
---- -
------------ ---- ---- ------ -----------
-在这个例子中，我们将 IBM Plex Sans 设置为默认字体，通过在 @font-face 中引用存储在 vendor/fonts 文件夹中的字体文件。
最后，我们只需要在需要使用 IBM Plex Sans 的地方使用字体名 IBM Plex Sans 即可。
<p>这是 IBM Plex Sans 字体。</p>
示例代码
下面我们来看一个完整的例子：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------------------- ------------ ----- ---------------- ------------------------------------ ----- ---------------- --------------------------------------------- ----- ---------------- --------------------------------- ------- ------ --------- ---------- ----- --- ---- ---- ------- ------- -------
app.css 文件中的样式如下：
-- -------------------- ---- -------
---------- -
------------ ---- ---- ------
----------- -------
------------ -------
---- --------------------------------------- ----------------
-------------------------------------- ---------------
-
---- -
------------ ---- ---- ------ -----------
-结论
通过使用 ember-font-plex 包，我们可以轻松地使用 IBM Plex 字体，而无需从 Google Fonts 上下载字体文件，可以方便地管理字体文件，避免加载时间过长，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e17a563576b7b1ecae7