在Angular.js中包含字体(.ttf)

Question

我有一个.ttf字体文件，需要在我的Angular.js应用程序中使用。我不知道如何导入它并在我的css文件中访问它。

请问有人能指导我如何在Angular / CSS中使用这个字体文件吗？

- Jorge Olivero

Answer 1

引入字体与AngularJS无关。您必须在CSS文件中声明它：

以我自己的代码块为例，声明在样式表中：

@font-face {
font-family: 'Durant';
src: url('../fonts/DurantBold.eot'); /* IE9 Compat Modes */
src: url('../fonts/DurantBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('../fonts/DurantBold.otf') format('opentype'), /* Legacy iOS */
     url('../fonts/DurantBold.svg#Durant-Bold') format('svg'), /* Legacy iOS */
     url('../fonts/DurantBold.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('../fonts/DurantBold.woff') format('woff');
font-weight: bold;
}

请记住，路径是相对于CSS文件的。

现在，大多数浏览器都支持大多数文件格式 - 我不确定各浏览器和字体之间的不兼容性。这种样式有点老旧。

此外，我拥有所有这些文件（每种字体、每种格式、每种权重变化、每种样式变化一个文件 - 非常令人沮丧）。您将不包含未拥有文件的配置。

如果您只有.ttf文件，您只需要在.css文件中使用以下代码片段：

@font-face {
font-family: 'Durant';
src: url('../fonts/DurantBold.ttf')  format('truetype');
font-weight: bold;
}

请记住：在使用这个代码块的页面中，确保实际引入了声明该样式表的 CSS 文件。如果你使用状态（ngRouter / ui.router），则在“主要页面”中引入字体，而非局部页面。

请注意：确保字体文件 (.ttf) 位于此 CSS 文件中声明可访问的位置:

• 绝对 URL / CDN：不需要解释。
• 相对于站点的 URL：以“/”开头的路径与文档根目录相对应，一如既往。
• 相对 URL：没有以“/”开头的路径是相对于当前 CSS 文件的。

我知道我写了好多遍，但如果不小心忘记，这总是会引起麻烦。

- Luis Masuelli