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

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

18 голосов
/ 27 декабря 2010

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

Ответы [ 4 ]

38 голосов
/ 27 декабря 2010

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

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

Подробнее об этом здесь .

19 голосов
/ 03 апреля 2014

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

Вставляет узел стиля в документ скрипта содержимого.

А для Font 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/*",
    ...
    ]
0 голосов
/ 07 августа 2014

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

Пользовательские шрифты расширения Firefox

Это в равной степени относится и к расширениям Chrome, поскольку вместо указания на шрифтфайл, вы включаете версию шрифта в кодировке base64 прямо в CSS.

0 голосов
/ 25 октября 2012

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

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

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

РЕДАКТИРОВАТЬ: Кажется, что другие получают смешанные результаты для этого. Я должен отметить, что это, вероятно, не работает, когда используется в скриптах содержимого. Я проверял это в Popup Scripts, и он отлично работает.

...