Question

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

有人可以给我一些使用Angular / CSS的字体文件的方向吗？

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文件的。

今天，大多数浏览器都支持大多数文件格式 - 具体而言，我不知道浏览器和字体之间的不兼容性。这种风格有点旧。

此外，我有所有这些文件（每个字体1个文件，每个格式，每个重量变化，每个样式变化 - 非常令人沮丧）。您不会包含您不具备的文件的配置。

如果您只有.ttf文件，则只需在.css文件中使用此代码段：

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

请记住在您要使用它的页面中实际包含您声明此块的css文件。如果使用状态（ngRouter / ui.router），则在MAIN页面中包含该字体，而不是在partials中。

记住将字体文件（.ttf）放在此css文件中的声明可访问的位置：

绝对网址/ CDN：这不需要解释。
relative-to-site url：以/开头的路径，指向相对于文档根目录的路径，一如既往。
relative url：不以/开头的路径相对于当前的css文件。

我知道我写了很多次，但在忘记时总会引起头痛。

在Angular.js（.ttf）中包含一个字体

1 个答案: