Bir CSS dosyasında chrome.extension.getURL() kullanamadığım için, yerel bir font dosyasıyla @ font-yüzünü nasıl kullanabilirim? İşteİçerik Komut Dosyası'nda bir Chrome Uzantısında @ font-face nasıl kullanılır?
css yerel yolunu almak için yapılması gerekenler: o here hakkında
body {
background-image:url('chrome-extension://[email protected]@extension_id__/background.png');
}
Daha.
Sadece ilgili bir URL kullanın. Bu basit, daha temiz ve ™ yapılacak doğru şey olduğunu:
@font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot');
}
Bu soru eski olduğunu biliyorum ama Google'da üst bir sonuç ve kabul edilen cevap verimsizdir.
DÜZENLEME: Diğerleri bunun için karışık sonuçlar alıyor gibi görünüyor. İçerik Komut Dosyalarında kullanıldığında muhtemelen işe yaramadığını belirtmeliyim. Bunu Popup Script'lerinde test ettim ve gayet iyi çalışıyor.
Bunun işe yaradığından emin misin? Benim için değil. – Layke
@Layke Yol, CSS dosya konumuna göre değişir. Örneği sadeleştirdim, bu yüzden muhtemelen bir 'format()' belirtmeniz gerekecek. – matpie
Bu çalışmaz. Çalışmakta olan Gerçek Web Sayfası içerik komut dosyasına kaynak bulmaya çalışır. –
Bu çözüm nihayet benim için çalıştı:
Bu içerik script belgeye bir stil düğümü enjekte eder.
Ve Harika Yazı için, sadece Chrome için .woff src'ye ihtiyacınız vardır.
Adding @font-face stylesheet rules to chrome extension
Kodum:
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/*",
...
]
Not: '' css ': [...] '' content_scripts' içerisine girer: [...] ' – IvanRF
Eski soruya, ama sanırım bu en iyi çözümdür:
Firefox extension custom fonts
Bir chrome uzantısına işaret etmek yerine, chrome uzantıları için eşit olarak uygulanır çünkü CSS'de fontun base64 kodlu sürümünü ekliyorsunuz demektir.
Bazı Chrome sürümlerinde, çalışmasını engelleyen bir hata var. Hızlı düzeltme: "__MSG _ @@ extension_id__" yerine sabit kodunuzu kullanın. Bummer, yerel olarak test ederken işe yaramayacak. –
https://developer.chrome.com/dev/extensions/manifest.html#web_accessible_resources adresine yazı tipi eklemeyi unutmayın! –