Verwendung von benutzerdefinierten/externen Schriftarten in Chrome Gepackte Apps

Ich habe Chrome Packaged App in AngularDart geschrieben und versucht, einige externe Symbole zu bekommen, um die App schöner aussehen zu lassen, konnte aber kein Beispiel über das Netz finden. Habe viele Dinge zusammen mit der folgenden Problemumgehung versucht, aber ich konnte es nicht zum Laufen bringen. Ich füge die @ font-face zu meinem CSS wie folgt:Verwendung von benutzerdefinierten/externen Schriftarten in Chrome Gepackte Apps

@font-face { 
    font-family: 'Icons'; 
    src: url(data:font/ttf;charset=utf-8;base64,<ttf file encoded to base64>) format('truetype'), 
     url(data:font/woff;charset=utf-8;base64,<woff file encoded to base64>) format('woff'), 
     url(data:font/svg;charset=utf-8;base64,<svg file encoded to base64>) format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

[class^="icon-"], [class*=" icon-"] { 
    font-family: 'Icons'; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 

    /* Better Font Rendering =========== */ 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

.icon-uniF085:before { 
    content: "\f085"; 
}

Ich versuche, CSP (Content Security Policy) Probleme zu vermeiden, indem sie meine Icon-Dateien konvertieren: ttf, .woff, .svg .eot zu base64 und einbetten sie in meine Controller-CSS, aber wenn ich die Anwendung ausführen alles, was ich in der Chrom sehe, ist die Standard-Quadrat-Box anstelle des Symbols, das ich verweise(); kein Fehler auf der Konsole oder auf dem Chrom-Browser. Ich frage mich, ob jemand benutzerdefinierte oder externe Symbole/Schriftarten mit den Chrome Packaged Apps verwendet. Bitte lassen Sie mich wissen, ob es einen Workaround gibt.

Quelle

2014-09-04 UCJava

Ich benutze PNG-Icons in der App als eine Arbeit für jetzt, aber es wäre schön, in der Lage, .ttf, .woff, .svg, .eot-Dateien in einer Chrome-App zu verwenden. Bitte posten Sie eine Lösung, wenn Sie in der Lage sind, eine beliebige Form in einer angulart-dart chrome-verpackten App zu verwenden. – UCJava

Vielleicht entfernen Sie das einfache Zitat aus "Icons" in dem Teil, den Sie tatsächlich einstellen? Ich weiß, dass Sie in einer normalen CSS-Datei keine Anführungszeichen verwenden, nachdem Sie die Zeichenfolge bereits im @ font-face-Bit angegeben haben. – shanling

Dies könnte relevant sein https://developer.chrome.com/extensions/manifest/web_accessible_resources –

auch nach einigen Versuchen, ich sehe die Problem hier ist nicht die Einbettung der Dateien in die Komponente, sondern tatsächlich die Schrift-Gesicht Arbeit in der shadowDOM, die nicht zu passieren scheint, sobald ich shadowDOM für meine Komponente deaktivieren, kann es die globalen Stile verwenden und die Symbole funktionieren gut base64-codiert, aber natürlich deaktiviert shadowDOM das gesamte Komponenten-Seiten-Design, das ich umgestalten müsste. Ich denke immer noch, es sollte eine Möglichkeit geben, font-face in shadowDOM zu verwenden.

Quelle

2014-12-10 00:38:20 UCJava

Versuchen Sie, die IcoMoon https://icomoon.io/app/ Sobald Sie Ihre Symbole importieren, wird es CSS-Dateien mit den Schriften eingebettet erzeugen (standardmäßig deaktiviert, Änderung der Einstellungen) gut funktioniert für mich

Quelle

2014-10-30 10:51:04 ochakov

gut nach einigen Versuchen, sehe ich das Problem hier ist nicht die Einbettung der Dateien in die Komponente, aber tatsächlich bekommen die Schrift-Gesicht Arbeit in der shadowDOM, die nicht zu passieren scheint, sobald ich shadowDOM für meine Komponente deaktivieren, die es verwenden kann Die globalen Styles und Icons funktionieren gut als base64-codiert, aber natürlich deaktiviert shadowDOM das gesamte Design der Komponentenseite, das ich umgestalten müsste. Ich denke immer noch, es sollte eine Möglichkeit geben, font-face in shadowDOM zu verwenden. – UCJava

Verwendung von benutzerdefinierten/externen Schriftarten in Chrome Gepackte Apps

Antwort

Verwandte Themen