Как использовать @ font-face на расширении Chrome в скрипте содержимого

Question

Поскольку я не могу использовать chrome.extension.getURL() в файле CSS, как я могу использовать @ font-face с локальным файлом шрифта?

Answer 1

Вот как получить локальный путь в CSS:

body { 
    background-image:url('chrome-extension://__MSG_@@extension_id__/background.png'); 
} 

Подробнее об этом here.

Answer 2

Просто используйте относительный URL. Это проще, чище, и это правильно делать ™:

@font-face { 
    font-family: 'FontAwesome'; 
    src: url('../font/fontawesome-webfont.eot'); 
} 

Я знаю, этот вопрос старый, но это верхний результат на Google и принятый ответ неэффективен.

EDIT: Кажется, что другие получают смешанные результаты для этого. Я должен упомянуть, что он, вероятно, не работает при использовании в Content Scripts. Я тестировал это в Popup Scripts, и он отлично работает.

Answer 3

Это решение, наконец, работал для меня:

Он впрыскивает узел стиля в документ сценария контента.

И для шрифта Awesome вам нужен только .woff src для Chrome.

Adding @font-face stylesheet rules to chrome extension

Мой код:

var fa = document.createElement('style'); 
    fa.type = 'text/css'; 
    fa.textContent = '@font-face { font-family: FontAwesome; src: url("' 
     + chrome.extension.getURL('lib/fa/fonts/fontawesome-webfont.woff?v=4.0.3') 
     + '"); }'; 
document.head.appendChild(fa); 

В манифесте:

"css":[ 
    "lib/fa/css/font-awesome.min.css", 
    ... 
    ] 

"web_accessible_resources":[ 
    "lib/fa/fonts/*", 
    ... 
    ] 

Answer 4

Старый вопрос, но я думаю, что это лучшее решение:

Firefox extension custom fonts

Он применяется в равной степени для расширений chrome, потому что вместо указания на файл шрифта вы включаете в себя кодированную версию basech шрифта прямо в CSS.