如何使用帶字體的browserify

因此，瀏覽器在運行時通過JavaScript來處理所有事情，甚至是CSS的東西。但我如何處理字體，如npm和browserify的字體真棒。如何使用帶字體的browserify

在這裏確實存在一個npm pacakge：https://www.npmjs.org/package/font-awesome 但是，如何在不使用其他工具如grunt或gulp的情況下爲我的瀏覽器捆綁字體。

//編輯

如果我想在我的HTML到現在使用FA類，是有另一種方式不是指着我的HTML文件中的node_modules/font-awesome/css/font-awesome.css？

我正在尋找一個自動化的解決方案，因爲如果我有像font-awesome這樣的多個庫，並且他們自帶資產（如字體，圖像和其他文件），我不想指向每個資產文件我的html文件。

用玉我可以在public服務一些文件。而public包含所有通過我的遠程依賴關係來的資產，如字體，圖像...... 但是如何自動將所有文件從特定的node_modules複製或符號鏈接到public？

2014-11-22 timaschew

你是什麼意思「捆綁」。 'npm install font-awesome'會在node_modules目錄中安裝所有的字體，並且可以簡單地將您的應用程序設置爲'。/ node_modules/fontawesome'作爲從中獲取資源的靜態目錄。你的問題確實需要更多的細節，比如你用來託管你的應用/網站/任何東西。另外，爲什麼需要grunt/gulp甚至是遠程問題？你顯然已經在使用node和browserify，加入Grunt/Gulp只是一種體面的做法。 – 2014-11-28 23:10:25

謝謝，更新了我的問題 – timaschew 2014-12-01 14:36:06

您是否在使用其他任何東西，還是隻是一個普通的.html文件和npm安裝的fontawesome？（例如，你使用快遞嗎？你使用的是jekyll等？） – 2014-12-03 15:58:46

我知道一個簡單的方法來做到這一點。以Base64格式使用您的字體。這樣，字體數據就在CSS本身中，而不是在外部文件中。然後，只需將您的CSS加載到Browserify中，以常用的方式（使用「insert-css」或「cssy」等模塊），因爲我使用Stylus，因此使用「stylify」，因爲它可以管理CSS定義，自帶字體數據。

預先壓縮Base64代碼也是一個好主意。或者讓Uglify最終做壓縮。比較結果。

請仔細檢查您的目標瀏覽器是否支持Base64字體。

來源

2015-02-20 19:17:41

如何使用帶字體的browserify

回答

相關問題