我有一个.ttf字体文件,需要在我的Angular.js应用程序中使用。我不知道如何导入它并在我的css文件中访问它。
请问有人能指导我如何在Angular / CSS中使用这个字体文件吗?
请问有人能指导我如何在Angular / CSS中使用这个字体文件吗?
引入字体与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 文件中声明可访问的位置:
我知道我写了好多遍,但如果不小心忘记,这总是会引起麻烦。