如何在 Angular 项目中捆绑字体，这样它就不会从互联网上下载？

Question

我正在使用一种名为 "Font Awesome" 的字体，但我遇到了一个问题，即我需要在本地使用该字体，而不是从互联网上下载该字体，这样即使客户端使用安装后产品立即脱机，然后客户端将能够看到 Font Awesome 字体的文本。

P.S. 我在前端使用 Angular 9

Answer 1

你可以

从npm/bower
把它放在 fonts 文件夹的某个地方（我个人不喜欢 assets 因为 angular 弄乱了它），
从 .scss 导入它

styles.scss:

@font-face {
font-family: 'FontAwesome';
src: url('<dist folder path>/font-awesome/fonts/fontawesome-webfont.eot');
src: url('<dist folder path>/font-awesome/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),     
    url('<dist folder path>/font-awesome/fonts/fontawesome-webfont.woff') format('woff'), 
    url('<dist folder path>/bower_components/font-awesome/fonts/fontawesome-webfont.ttf') format('truetype'), 
    url('<dist folder path>/bower_components/font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;

}

请注意，<dist folder path> 指的是您下载资产的位置。这是指您的 img 中 CoreAMS 文件夹正上方的第一个云 img

很有可能 <dist folder path> = fonts/ 如果此文件夹位于 tsconfig.json

中的 baseUrl 下

Answer 2

在您的情况下，fontawesome 提供了一个 angular 组件。 NPM

如何在 Angular 项目中捆绑字体，这样它就不会从互联网上下载？

How to bundle a font in Angular Project so that it should not be downloaded from the internet?

font-awesome

angular

angular9