2014-11-22 26 views
7

Przeglądaj wszystko za pomocą JavaScript w środowisku wykonawczym, a nawet w CSS. Ale jak mogę obsługiwać czcionki, takie jak font-awesome z npm i browserify.Jak korzystać z przeglądania za pomocą czcionek

Pakiety npm istnieją tutaj: https://www.npmjs.org/package/font-awesome Ale jak mogę pakować czcionki do mojej przeglądarki bez użycia innego narzędzia, takiego jak grunt czy łyk.

// edit

Jeśli chcę użyć teraz klasę fa w moim html, czy istnieje inny sposób niż wskazując na node_modules/font-awesome/css/font-awesome.css w moim pliku html?

Przeszukuję zautomatyzowane rozwiązanie, ponieważ jeśli mam kilka bibliotek takich jak font-awesome i przynoszą one własne zasoby, takie jak czcionki, obrazy i inne pliki, nie chcę wskazywać każdego pliku zasobów ręcznie w mój plik html.

Z jaderem mogę po prostu podać kilka plików w public. I public zawiera wszystkie zasoby, które przychodzą przez moje zdalne zależności, takie jak czcionki, obrazy, ... Ale jak automatycznie skopiować lub dowiązać symbolicznie wszystkie pliki z konkretnej node_modules do pliku public?

+0

co masz na myśli "pakiet". 'npm install font-awesome' instaluje wszystkie fajne czcionki w katalogu node_modules i możesz po prostu skonfigurować swoją aplikację tak, aby wskazywała'./node_modules/fontawesome' jako statyczny katalog do pobierania zasobów z. Twoje pytanie naprawdę potrzebuje więcej szczegółów, takich jak to, czego używasz do hostowania aplikacji/witryny/cokolwiek. Poza tym, dlaczego chęć użycia chrząka/gulp może być nawet problematyczna? Jasno już używasz węzła i przeszukujesz, a dodanie Grunta/Gulpa to po prostu przyzwoita praktyka. –

+0

dzięki, zaktualizowałem moje pytanie – timaschew

+0

czy używasz czegoś innego, czy jest to zwykły plik .html i zainstalowany font-owy npm? (np. czy korzystasz z ekspresu? czy używasz jekyll, itp.?) –

Odpowiedz

2

Znam jeden prosty sposób na zrobienie tego. Użyj czcionek w formacie Base64. W ten sposób dane Czcionki spoczywają w samym CSS, a nie w plikach zewnętrznych.

Następnie wystarczy załadować swój CSS do Browserify w zwykły sposób (z modułami, takimi jak "insert-css" lub "cssy".) Używam "stylify", ponieważ używam Stylusa) i jako, że potokuje definicje CSS, będzie również nosić same dane czcionki.

Kompresowanie kodu Base64 jest dobrym pomysłem. A może pozwól Uglify'emu na kompresowanie w końcu. Porównaj wyniki.

Dokonaj podwójnego sprawdzenia obsługi przeglądarek docelowych dla czcionek Base64.

Powiązane problemy