如何将新字体导入项目 - Angular 5

Question

我想将新字体导入我的 Angular 5 项目。

我试过：

1) 将文件复制到资产/字体/

2) 将其添加到.angular-cli.json样式

中但是我已经检查过该文件不是.css，它是一个像.exe一样工作的.otf(它是一个安装程序)，所以我真的不知道如何导入它。知道吗？

Answer 1

您需要将字体文件放在 assets 文件夹(可能是 assets 中的字体子文件夹)中，并在样式中引用它：

@font-face {
font-family: lato;
src: url(assets/font/Lato.otf) format("opentype");
}

完成后，您可以在任何位置应用此字体，例如：

* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'lato', 'arial', sans-serif;
}

您可以将@font-face定义放在全局styles.css或styles.scss中，并且可以在任何地方引用字体 - 即使在特定于组件的CSS/SCSS中也是如此。styles.css或styles.scss已在angular-cli.json中定义。或者，如果需要，可以创建一个单独的 CSS/SCSS 文件，并在 angular-cli.json 中声明它以及styles.css或styles.scss，如下所示：

"styles": [
"styles.css",
"fonts.css"
],

Answer 2

您可以尝试使用字体为您的字体创建一个 css(如此处所述)

步骤#1

创建一个带有字体的 css 文件并将其放置在某个地方，就像在assets/fonts中一样

自定义字体.css

@font-face {
font-family: YourFontFamily;
src: url("/assets/font/yourFont.otf") format("truetype");
}

步骤#2

将 css 添加到styles配置中的.angular-cli.json(或角度 6+ 的.angular.json

)

"styles":[
//...your other styles
"assets/fonts/customFont.css"
]

执行此操作后不要忘记重新启动ng serve

步骤#3

在代码中使用字体

组件.css

span {font-family: YourFontFamily; }

Answer 3

上面已经存在答案，但我想添加一些东西..您可以在@font中指定以下内容

@font-face {
font-family: 'Name You Font';
src: url('assets/font/xxyourfontxxx.eot');
src: local('Cera Pro Medium'), local('CeraPro-Medium'),
url('assets/font/xxyourfontxxx.eot?#iefix') format('embedded-opentype'),
url('assets/font/xxyourfontxxx.woff') format('woff'),
url('assets/font/xxyourfontxxx.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}

因此，您只需指示已选择的字体系列名称即可

注意：字体粗细和字体样式取决于您的 .woff .ttf ...文件

Answer 4

如果您使用的是 Angular，

确保将字体放在资产文件夹中的某个位置。

很多刚接触 angular 的人应该把它们放在其他地方，但 Angular 围绕 assets 文件夹中的文件对其生产构建进行了大量优化。

Answer 5

如果使用材质设计，则需要在 style.scss 文件中添加以下代码行

@import url("https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import '~@angular/material/theming';
$typography: mat-typography-config(
$font-family: 'Saira'
);
@include angular-material-typography($typography);

Answer 6

注意：我推荐上面的答案，因为我相信我是这个星球上唯一一个真正喜欢Apple的SF Pro字体的人，但以防万一你像我一样(并且你在Mac上搜索.otf/.ttf文件)：

@Saptarshi巴苏的回答对我来说非常有效。如果您正在寻找 SF Pro 字体.otf(或.ttf)文件：

• 打开字体册应用程序
• 在可滚动列表中查找要包含在项目中的字体
• 右键单击>在查找器中显示
• 将(全部或仅一个).otf(或.ttf)文件复制到资源内部的字体文件夹中(或项目中的任何位置，但 10/10 建议创建一个字体文件夹)

我的 styles.scss 文件如下所示：

// Fonts
@font-face {
font-family: SFPRO;
src: url("assets/fonts/SF-Pro/SF-Pro-Text-Regular.otf"); 
format: "opentype";
}
// CSS Reset
* { 
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: SFPRO
}

显然，我的每个孩子.scss文件都"包括"(呵呵)：

@import '../../../../../styles.scss';

我怎么强调都不为过： 听听@DAVID的回答，并确保你重新开始发球 - 相信他(和我)在这一点上。