什么是 Fontana?
Fontana 是一个为 Ember.js 应用程序添加 OpenType 字体的插件。它允许您将字体文件嵌入到您的网站中，从而简化了字体的加载和管理。
安装
Fontana 可以使用 npm 进行安装:
npm install ember-cli-fontana
用法
- 在您的
ember-cli-build.js中，添加以下内容:
-- -------------------- ---- -------
--- --- - --- ----------
-------- -
------- -
---------- -
------ -
-
------- ----- ------
----- -
------------------------------------
---------------------------------
---------------------------------
-
-
-
-
-
-
---在 themes 中，每个对象都代表了一个主题，default 是默认的主题。 在 fonts 数组中，每个对象都代表了一个字体。 family 属性是您将在 CSS 中使用的字体系列名称，urls 则是包含 CSS 中字体文件的 URL 数组。
- 然后，在您的
app/styles/app.css中，添加以下内容:
@font-face {
font-family: 'Open Sans';
src: url('/assets/fonts/OpenSans-Regular.ttf') format('truetype'),
url('/assets/fonts/OpenSans-Bold.ttf') format('truetype'),
url('/assets/fonts/OpenSans-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}这将向您的应用程序中添加一个 @font-face 规则，该规则使浏览器能够正确加载字体。
示例
您可以在 GitHub 上找到 ember-cli-fontana 的示例。
总结
现在，您已经了解了如何使用 Fontana 为您的 Ember.js 应用程序添加 OpenType 字体。这是一个很好的工具，它可以让您在网站设计中更加自由，而不受限于系统字体的选择。希望本文能对您有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005574281e8991b448d43a0