Da ich chrome.extension.getURL() nicht in einer CSS-Datei verwenden kann, wie kann ich @ font-face mit einer lokalen Schriftartdatei verwenden?Verwendung von @ font-face auf einer Chrome-Erweiterung in einem Inhaltsskript
Hier ist, wie lokalen Pfad in CSS zu erhalten:
body {
background-image:url('chrome-extension://[email protected]@extension_id__/background.png');
}
Mehr dazu here.
Verwenden Sie einfach eine relative URL. Es ist einfacher, sauberer und ist das Richtige tun ™:
@font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot');
}
Ich weiß, diese Frage ist alt, aber es ist ein Top-Ergebnis auf Google und die akzeptierte Antwort ist ineffizient.
EDIT: Es scheint, dass andere gemischte Ergebnisse dafür bekommen. Ich sollte erwähnen, dass es wahrscheinlich nicht funktioniert, wenn es in Inhaltsskripten verwendet wird. Ich habe das in Popup Scripts getestet und es funktioniert gut.
Sind Sie sicher, dass das funktioniert? Es ist nicht für mich. – Layke
@Layke Der Pfad ist relativ zum Speicherort der CSS-Datei. Ich habe das Beispiel vereinfacht, so dass Sie wahrscheinlich noch ein 'format()' angeben müssen. – matpie
Dieser funktioniert nicht. Es versucht, eine Ressource auf dem aktuellen Webseiten-Inhaltsskript zu finden. –
Diese Lösung schließlich für mich gearbeitet:
Es injiziert eine Art Knoten in das Dokument des Content-Skript.
Und für Font Awesome brauchen Sie nur die .woff src für Chrome.
Adding @font-face stylesheet rules to chrome extension
Mein Code:
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);
In Ihrem Manifest:
"css":[
"lib/fa/css/font-awesome.min.css",
...
]
"web_accessible_resources":[
"lib/fa/fonts/*",
...
]
Hinweis: '" css ": [...]' geht nach innen "" content_scripts ": [...]' – IvanRF
alte Frage, aber ich denke, ist die beste Lösung:
Firefox extension custom fonts
Es gilt gleichermaßen für Chrome-Erweiterungen, denn statt auf eine Schriftartdatei zu verweisen, fügen Sie die Base64-codierte Version der Schriftart direkt in das CSS ein.
Es gibt einen Fehler in einigen Chrome-Versionen, der verhindert, dass dies funktioniert. Die schnelle Lösung: Verwenden Sie Ihre Erweiterungs-ID fest codiert statt "__MSG _ @@ Erweiterung_ID__". Der Nachteil ist, dass beim lokalen Testen wird es nicht funktionieren. –
Vergessen Sie nicht, Schriftarten zu https://developer.chrome.com/dev/extensions/manifest.html#web_accessible_resources hinzuzufügen !! –