如何使用Bower安裝自定義字體？ （not Font Awesome）

Question

我使用Bower，並且已經安裝了Font Awesome，但現在我想知道是否可以使用Bower安裝自定義字體（更具體的說法是：Raleway和Montserrat）。我可以這樣做嗎？

我做了一些研究，但沒有找到任何解決方案！如果可能的話，請告訴我如何。

Answer 1

你可以做什麼，而不是與鮑爾管理它，是直接添加到您的CSS或SCSS @import url(http://fonts.googleapis.com/css?family=Raleway)谷歌代碼或手動添加字體，首先下載字體，然後將相對路徑添加到您的CSS。

您可以在這裏下載raleway http://www.google.com/fonts#UsePlace:use/Collection:Raleway，點擊頁面右上角的向下箭頭，解壓並將字體添加到您的網站。

Answer 2

Raleway包含在涼亭包TypoPRO。

與

bower install --save typopro 

安裝它，你是新來的涼亭，這裏一些進一步提示：

由於bower_components目錄通常是從版本控制排除在外，你可以複製你需要到另一個文件目錄與一個咕task任務。

添加exportsOverride部分bower.json：

{ 
    (…) 
    "dependencies": { 
    "typopro": … 
    }, 
    "exportsOverride": { 
    "typopro": { 
     "fonts": "web/TypoPRO-Raleway/*" 
    } 
    } 
    (…) 
} 

安裝咕嚕

$ npm install -g grunt-cli 
$ npm install --save-dev grunt 
$ npm install --save-dev grunt-bower-task 

，並創建Gruntfile.js：

module.exports = function(grunt) { 

    var path = require('path'); 

    grunt.initConfig({ 
    bower: { 
     install: { 
     options: { 
      targetDir: 'vendor', 
      cleanTargetDir: true, 
      layout: function(type, component, source) { 
      return type; 
      } 
     } 
     } 
    } 
    }); 

    // These plugins provide necessary tasks. 
    grunt.loadNpmTasks('grunt-bower-task'); 

    // Default task. 
    grunt.registerTask('default', ['bower:install']); 

}; 

繁重的任務bower:install將運行bower install並將所有文件從web/TypoPRO-Raleway複製到vendor/fonts（vendor從targetDir在Gruntfile.js和fonts從exportsOverride在bower.json）。你可以用

$ grunt bower:install 

由於bower:install註冊爲默認任務執行任務，你也可以使用快捷：

$ grunt 

Answer 3

另一種解決方案是使用grunt而不是bower來管理你的字體。我發現了兩個從Google爲你下載字體的grunt插件。

grunt-local-googlefont和grunt-goog-webfont-dl。您可以通過npm進行安裝。

有很多不同的插件可以從其他來源下載字體。只需在grunt's plugin search處搜索font即可。

Answer 4

我在鮑爾找到的最佳解決方案是Google Fonts Bower Proxy（來源Github）。您必須首先通過轉到Google字體來獲取查詢字符串。

<link href='http://fonts.googleapis.com/css**?family=fontname:size**' rel='stylesheet' type='text/css'> 

然後用鮑爾：

bower install --save https://google-fonts.azurewebsites.net/googleFonts/yourPackageName?family=fontname:size 

根據不同的需求，它實際上可能是更容易簡單地將字體導入到你的CSS或SASS，而不是去爲涼亭基礎的解決方案。

還有一個google fonts bower package其中包括所有字體。