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

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页面中，而不是在部分中。

记得有在此css文件或者被宣告访问的位置字体文件（.TTF）：

• 绝对URL/CDN：这个不需要解释。
• 相对站点URL：以/开头的路径指代与文档根相关的路径，如往常一样。
• relative url：不以/开始的路径是相对于当前的css文件。

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