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

【问题标题】：How to import a new font into a project - Angular 5如何将新字体导入项目 - Angular 5
【发布时间】：2018-09-27 11:20:47
【问题描述】：

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

我试过了：

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

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

但我检查了该文件不是.css，它是一个.otf，其工作方式类似于.exe（它是一个安装程序），所以我真的不知道如何导入它。有什么想法吗？

【问题讨论】：

看看这里stackoverflow.com/questions/3245141/…。创建 css 文件并将其放入您的 .angular-cli.json 文件中
在这里得到了答案，maven 正在破坏字体stackoverflow.com/questions/31001842/…

标签： angular fonts

【解决方案1】：

你需要把字体文件放在assets文件夹（可能是assets里面的fonts子文件夹），并在styles中引用：

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

【讨论】：

你的意思是将我的 .angular-cli-json 的样式更新为 "styles": [ @font-face { font-family: lato; src: url(assets/font/Lato.ttf); } ] ?
您可以将@font-face 定义放在您的全局styles.css 或stles.scss 中，您可以在任何地方引用该字体——甚至在您的组件特定的CSS/SCSS 中。 styles.css 已在 angular-cli.jso 中定义。或者，如果您愿意，您可以创建一个单独的 CSS 文件并在 angular-cli.json 中提及它
是否需要加上format("truetype"); ?我正在使用 fonts.googleapis.com/css?family=Source+Sans+Pro 并且它可以直接工作
好东西！像魅力一样工作！
@SatishPatro 仅当您的字体文件具有不常见的文件扩展名时，或者当您想向用户代理明确指定其格式以跳过其他格式以提高加载速度或带宽时，您才需要指定其格式用法。在其他情况下，您的浏览器可以自动识别您的字体文件的格式。

【解决方案2】：

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

第 1 步

创建一个带有字体的 css 文件并将其放置在某处，例如 assets/fonts

customFont.css

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

第 2 步

在 styles 配置中将 css 添加到 .angular-cli.json（或 .angular.json 用于 Angular 6+）中

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

完成此操作后不要忘记重新启动ng serve

第 3 步

在代码中使用字体

component.css

span {font-family: YourFontFamily; }

【讨论】：

是否需要加上format("truetype"); ?我正在使用fonts.googleapis.com/css?family=Source+Sans+Pro，它可以直接工作
请确保将正斜杠放在“/assets/font/”等资产之前。如果错过了正斜杠，会导致无效的 URL 错误。
确保 css 文件名相同，在第 1 步是 customfont.css，但在第 2 步是 customFonts.css，所以要小心
我发现我的路径必须采用“src/assets/fonts/file.ext”格式，而不是“/assets/...”或“assets/...”或“ ./assets/..."

【解决方案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 ... 文件

【讨论】：

【解决方案4】：

如果您使用的是 Angular，

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

很多人不熟悉 Angular figure，他们应该把它们放在别处，但是 Angular 围绕资产文件夹中的文件对其产品构建做了很多优化。

【讨论】：

【解决方案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>

【讨论】：