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

Question

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

angularfonts

106

我想将一个新字体导入到我的Angular 5项目中。

我已经尝试过:

1）将文件复制到assets / fonts /

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

但是我已经检查过该文件不是 .css ，它是一个 .otf ，类似于 .exe (它是一个安装程序)，因此我不知道如何导入它。有什么建议吗？

- bellotas

3

请看这里：https://dev59.com/WHA75IYBdhLWcg3wg5js。创建CSS文件并将其放置在你的`.angular-cli.json`文件中即可。我会尽力使翻译内容易于理解，但不会改变原文意思。 - David

在这里找到了答案，是因为Maven正在破坏字体。 - Rajkiran

6个回答

48

你可以尝试使用font-face为字体创建css（就像这里解释的一样）

步骤#1

创建一个包含字体面板的CSS文件并将其放在某个位置，比如assets/fonts

customFont.css

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

步骤 #2

将 CSS 添加到您的 .angular-cli.json（或 Angular 6+ 的 .angular.json）中的 styles 配置中。

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

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

步骤＃3

在您的代码中使用该字体

component.css

span {font-family: YourFontFamily; }

- David

1

需要添加 format("truetype") 吗？我正在使用 https://fonts.googleapis.com/css?family=Source+Sans+Pro ，它可以直接工作。 - Satish Patro

请确保在像“/assets/font/”这样的资源前面加上斜杠。如果您忘记了斜杠，将会导致无效的URL错误。 - Prateek Kumar Dalbehera

确保CSS文件名相同，在步骤1中是customfont.css，但在步骤2中是customFonts.css，所以请小心。 - Omar Salem

我发现我的路径必须采用格式“src/assets/fonts/file.ext”，而不是“/assets/...”、“assets/...”或“./assets/...”。 - Jack J

10/10 强调“在执行此操作后不要忘记重新启动 ng serve”。不要因为（愚蠢地）没有阅读完整个答案而浪费 20 分钟以为自己很笨。在这个问题上，让我带你走，这样你就可以跑了。 :) - Alan D. Powell

6

已经有了上面的答案，但我还想补充一些内容...您可以在@font-face中指定以下内容：

@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 ... 文件。

- Smaillns

local() 函数是做什么的？ - C4d

1

如果您正在使用Angular，

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

很多新手认为应该将它们放在其他地方，但是Angular针对资产文件夹中的文件进行了许多优化以进行生产构建。

- TheJeff

0

如果您使用Material Design，在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);

- Botond

0

注意：我建议使用上面的答案，因为我相信我是地球上唯一一个真正喜欢苹果SF Pro字体的人，但是如果你和我一样（并且你正在Mac上搜索.otf/.ttf文件）：

@Saptarshi Basu的答案对我非常有效。如果您正在寻找SF Pro字体.otf（或.ttf）文件：

打开Font Book应用程序
在可滚动列表中找到您想要包含在项目中的字体
右键单击>在Finder中显示
将（全部或仅一个）.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的答案，并确保重新启动ng serve - 相信他（和我）在这一点上。

- Alan D. Powell

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Saptarshi Basu · Accepted Answer

您需要将字体文件放在资产文件夹中（可能是资产文件夹内的fonts子文件夹），并在样式中引用：

@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"
],