如何使用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其中包括所有字体。