Ответ 1
Вот как получить локальный путь в css:
body {
background-image:url('chrome-extension://[email protected]@extension_id__/background.png');
}
Подробнее об этом здесь.
Так как я не могу использовать chrome.extension.getURL()
в файле CSS, как я могу использовать @font-face с локальным файлом шрифта?
Вот как получить локальный путь в css:
body {
background-image:url('chrome-extension://[email protected]@extension_id__/background.png');
}
Подробнее об этом здесь.
Это решение, наконец, помогло мне:
Он вводит стиль node в документ содержимого script.
И для шрифта Awesome вам нужен только .woff src для Chrome.
Добавление правил таблицы стилей @font-face для расширения chrome
Мой код:
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/*",
...
]
Просто используйте относительный URL. Это проще, чище, и это The Right Thing To Do ™:
@font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot');
}
Я знаю, что этот вопрос старый, но это лучший результат в Google, и принятый ответ неэффективен.
РЕДАКТИРОВАТЬ: Кажется, что другие получают смешанные результаты для этого. Я должен упомянуть, что он, вероятно, не работает при использовании в Content Scripts. Я тестировал это в Popup Scripts, и он отлично работает.
Старый вопрос, но это я считаю лучшим решением:
Пользовательские шрифты расширения Firefox
Он применяется в равной степени для расширений chrome, потому что вместо указания на файл шрифта вы включаете в себя кодированную версию baseform шрифта прямо в CSS.