如何使用 Bower 安装自定义字体？（不是字体真棒）答案

【问题标题】：How can I install custom fonts using Bower? (not Font Awesome)如何使用 Bower 安装自定义字体？（不是字体真棒）
【发布时间】：2014-08-30 21:19:38
【问题描述】：

我正在使用 Bower，并且已经安装了 Font Awesome，但现在我想知道是否可以使用 Bower 安装 自定义字体（更具体地说：Raleway 和 Montserrat）。我可以这样做吗？

我做了一些研究，但没有找到任何解决方案！如果可以的话，请告诉我怎么做。

【问题讨论】：

标签： gruntjs bower

【解决方案1】：

我在 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 的解决方案更容易。

还有一个google fonts bower package，其中包括所有字体。

【讨论】：

其实这很有帮助。可惜这个答案在页面底部。

【解决方案2】：

Raleway 包含在 Bower 包 TypoPRO 中。

安装它

bower install --save typopro

由于您是 bower 新手，这里还有一些提示：

由于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']);

};

grunt 任务bower:install 将运行bower install 并将所有文件从web/TypoPRO-Raleway 复制到vendor/fonts（vendor 从targetDir 在Gruntfile.js 和fonts 从exportsOverride 在@98765 )。您可以使用

执行任务

$ grunt bower:install

由于bower:install已注册为默认任务，您也可以使用快捷方式：

$ grunt

【讨论】：

【解决方案3】：

您可以做的，而不是使用 bower 管理它，而是将 google 代码直接添加到您的 CSS 或 SCSS @import url(http://fonts.googleapis.com/css?family=Raleway) 中，或者通过首先下载字体然后将相对路径添加到您的 css 中手动添加字体。

您可以在这里http://www.google.com/fonts#UsePlace:use/Collection:Raleway下载raleway，点击页面右上角的向下箭头，解压缩并将字体添加到您的网站。

【讨论】：

【解决方案4】：

另一种解决方案是使用grunt 而不是bower 来管理您的字体。我找到了两个 grunt 插件，它们可以为你从 Google 下载字体。

grunt-local-googlefont 和 grunt-goog-webfont-dl。您可以通过npm 安装它们。

有很多不同的插件可以从其他来源下载字体。只需在grunt's plugin search 搜索font。

【讨论】：