Question

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

我试过了：

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

2）将其添加到master个样式

但我检查过该文件不是.angular-cli.json，它是一个.css，就像一个.otf（它是一个安装程序）所以我真的不知道如何导入它。有什么想法吗？

Answer 1

您需要将字体文件放在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

您可以尝试使用font-face为您的字体创建css（如解释here）

第1步

使用font face创建一个css文件并将其放在某个位置，例如assets/fonts

<强> customfont.css

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

第2步

将css添加到styles config

中的.angular-cli.json

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

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

第3步

使用代码中的字体

<强> component.css

span {font-family: YourFontFamily; }

Answer 3

答案已经在上面，但是我想添加一些内容。您可以在@ 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 ...文件

Answer 4

如果您使用的是 Angular，

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

许多刚接触 Angular 图形的人应该把它们放在其他地方，但 Angular 围绕资产文件夹中的文件对其 prod 构建做了很多优化。

Answer 5

您还需要像这样更新您的 web.config 文件：（选择您的字体类型）

<system.webServer>
  <staticContent>
    <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />
    <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    <mimeMap fileExtension=".json" mimeType="application/json" />
    <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
    <mimeMap fileExtension=".ttf" mimeType="application/x-font-truetype" />
    <mimeMap fileExtension=".otf" mimeType="application/x-font-opentype" />
  </staticContent>

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

5 个答案: