Question

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

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

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

};

grunt任务bower:install将运行bower install并将所有文件从web/TypoPRO-Raleway复制到vendor/fonts vendor从targetDir复制到{{1}来自Gruntfile.js中fonts的{}}和exportsOverride。您可以使用

执行任务

bower.json

由于$ grunt bower:install被注册为默认任务，您还可以使用捷径：

bower:install

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实际上可能更容易，而不是转向基于投影机的解决方案。

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

Answer 3

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

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

Answer 4

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

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

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

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

4 个答案:

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

4 个答案:

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