如何使用Bower安装自定义字体？(不是Font Awesome)

Question

我正在使用Bower,并且已经安装了Font Awesome,但现在我想知道我是否可以使用Bower 安装自定义字体(更具体地说:Raleway和Montserrat).我能这样做吗？

我做了一些研究,但我找不到任何解决方案!如果有可能,请告诉我如何.

Answer 1

Raleway包含在凉亭包TypoPRO中.

安装它

bower install --save typopro

由于您是凉亭新手,这里有一些进一步的提示:

由于bower_components目录通常从版本控制中排除,因此您可以使用grunt任务将所需文件复制到另一个目录.

添加一个exportsOverride部分到bower.json:

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

安装grunt

$ 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 2

我在Bower找到的最佳解决方案是Google Fonts Bower Proxy(Github上的源代码).您必须先转到Google字体才能获得查询字符串.

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

然后使用Bower:

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

根据要求,简单地将字体导入CSS或SASS实际上可能更容易,而不是去基于bower的解决方案.

还有一个谷歌字体凉亭包,其中包括所有字体.