在Angular.js(.ttf)中包含字体 [英] Including a font in Angular.js (.ttf)

问题描述

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

I have a .ttf font file that I need to use in my Angular.js application. I don't know how to import it and access it in my css files.

有人可以给我一些在Angular/CSS中使用此字体文件的指导吗?

Could someone give me some direction in using this font file with Angular/CSS?

推荐答案

包含字体与angularjs无关.您必须在CSS文件中声明它:

Including a font has nothing to do with angularjs. You have to declare it in a CSS file:

以我自己的这个块为例，在样式表中声明:

Take this chunk of my own as an example, declared in a stylesheet:

@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文件的.

Remember that the paths are relative to the css file.

今天，大多数浏览器都支持大多数文件格式-具体来说，我不知道浏览器和字体之间的不兼容性.这种风格有些古老.

Today, most of the file formats are supported by most browsers - I don't know, concretely, the incompatibilities among browsers and fonts. This style is somewhat old.

此外，我还有所有这些文件(每种字体，每种格式，每种粗细变化，每种样式变化1个文件-非常令人沮丧).您将不包含没有文件的配置.

Besides, I have all of those files (1 file per font, per format, per weight variation, per style variation - highly frustrating). You will not include configs for files you don't have.

如果只有.ttf文件，则只需在.css文件中使用以下代码段即可:

If you have only .ttf files you only need this snippet in the .css file:

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

记住，以便在使用它的页面中实际包含声明此块的css文件.如果您使用状态(ngRouter/ui.router)，则将字体包括在MAIN页面中，而不是局部字体中.

remember to actually include the css file where you declared this chunk, in the page where you will use it. If you use states (ngRouter / ui.router), then include the font in the MAIN page, not in the partials.

记住，将字体文件(.ttf)放置在此css文件中的声明可访问的位置，或者是:

remember to have the font files (.ttf) in a location accessible by the declaration in this css file either being:

• 绝对URL/CDN:这不需要解释.
• 相对网址:始终以/开头的路径是相对于文档根目录的路径.
• 相对网址:不是以/开头的路径是相对于当前css文件的.

我知道我写过很多次，但是一旦忘记，它总是会引起头痛.

I know I wrote that many times but it always causes headaches when forgotten.

这篇关于在Angular.js(.ttf)中包含字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！