Używanie ikony niestandardowych/zewnętrznych czcionek w aplikacjach w pakiecie Chrome

Mam aplikację Packages do Chrome napisaną w AngularDart i próbuję pobrać zewnętrzne ikony, aby wyglądała ładniej, ale nie znalazłem żadnego przykładu przez sieć. Próbowałem wielu rzeczy wraz z poniższym obejściem, ale nie mogłem go uruchomić. Jestem dodanie @ font-face do mojego CSS jak poniżej:Używanie ikony niestandardowych/zewnętrznych czcionek w aplikacjach w pakiecie Chrome

@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"; 
}

Staram się unikać polityki bezpieczeństwa CSP (Content) problemy poprzez konwersję moje pliki ikon: .ttf, .woff, .svg , .eot do base64 i osadzanie ich w moim CSS kontrolera, ale kiedy uruchomię aplikację, wszystko, co widzę w chromie, to domyślne kwadratowe pole zamiast ikony, do której się odwołuję(); brak błędu na konsoli lub w przeglądarce Chrome. Zastanawiam się, czy ktoś ma niestandardowe lub zewnętrzne ikony/czcionki współpracujące z aplikacjami Chrome Packaged. Daj mi znać, jeśli i tak istnieje obejście.

Źródło

2014-09-04 UCJava

Na razie używam ikon PNG jako aplikacji do pracy, ale dobrze byłoby móc korzystać z plików .ttf, .woff, .svg, .eot w chromowanej aplikacji. Proszę napisać rozwiązanie, jeśli jesteś w stanie użyć dowolnej formy tych w aplikacji pakowanej w chromowane kule typu angulart-dart. – UCJava

Może usunąć pojedynczą cytat z "Ikony" w części, którą faktycznie ustawiasz? W normalnym pliku css nie używasz cudzysłowów po tym, jak już określiłeś ciąg znaków w bitach @ font-face. – shanling

Może to być istotne https://developer.chrome.com/extensions/manifest/web_accessible_resources –

dobrze, po kilku próbach, widzę tutaj problem nie polega na osadzaniu plików w komponencie, ale w rzeczywistości działanie czcionki działa w shadowDOM, co nie zdarza się, po wyłączeniu shadowDOM dla mojego komponentu może używać globalnych stylów i ikony działają dobrze jak base64 zakodowane, ale poza tym wyłączenie shadowDOM masuje cały projekt strony komponentu, który musiałbym zmienić. Nadal uważam, że powinien istnieć sposób użycia font-face w shadowDOM.

Źródło

2014-12-10 00:38:20 UCJava

Spróbuj IcoMoon https://icomoon.io/app/ Po zaimportowaniu ikon, będzie generować pliki CSS z czcionek osadzonych (domyślnie wyłączone, zmian w preferencjach) pracował dobrze dla mnie

Źródło

2014-10-30 10:51:04 ochakov

Cóż, po kilku próbach, widzę, że problem nie polega na osadzaniu plików w komponencie, ale w rzeczywistości powoduje, że czcionka działa w shadowDOM, co nie zdarza się, gdy wyłączam shadowDOM dla mojego komponentu, może globalne style i ikony działają dobrze jako kodowane base64, ale oczywiście wyłączenie shadowDOM maskuje cały projekt strony komponentu, który musiałbym zmienić. Nadal uważam, że powinien istnieć sposób użycia font-face w shadowDOM. – UCJava

Używanie ikony niestandardowych/zewnętrznych czcionek w aplikacjach w pakiecie Chrome

Odpowiedz

Powiązane problemy