Включая шрифт в Angular.js (.ttf)

Question

У меня есть файл шрифта .ttf, который мне нужно использовать в моем приложении Angular.js. Я не знаю, как импортировать его и получить доступ к нему в моих файлах css.

Может ли кто-нибудь дать мне некоторое руководство в использовании этого файла шрифта с помощью Angular/CSS?

Answer 1

В том числе шрифт не имеет ничего общего с угловыми. Вы должны объявить его в файле 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, а не в частичные.

запомнить иметь файлы шрифтов (.ttf) в месте, доступном для декларации в этом файле CSS либо существа:

• Абсолютный URL/CDN: это не нуждается в объяснении.
• относительный URL-адрес: путь, начинающийся с /, указывает путь, относящийся к корню документа, как всегда.
• относительный url: путь, не начинающийся с /, относится к текущему файлу css.

Я знаю, что я писал это много раз, но он всегда вызывает головные боли, когда забывается.