Làm cách nào để cài đặt phông chữ tùy chỉnh bằng Bower? (không phải Font Awesome)

Question

Tôi đang sử dụng Bower và đã cài đặt Font Awesome với nó, nhưng bây giờ tôi tự hỏi liệu tôi có thể cài đặt phông chữ tùy chỉnh (cụ thể hơn là Raleway và Montserrat) bằng Bower. Tôi có thể làm điều đó?

Tôi đã thực hiện một số nghiên cứu nhưng tôi không tìm thấy giải pháp nào! Nếu có thể, hãy cho tôi biết làm thế nào.

Answer 1

Những gì bạn có thể làm, thay vì quản lý bằng bower, hãy thêm mã google trực tiếp vào CSS hoặc SCSS @import url(http://fonts.googleapis.com/css?family=Raleway) hoặc thêm phông chữ theo cách thủ công bằng cách tải phông chữ đầu tiên rồi thêm đường dẫn tương đối vào css của bạn.

Bạn có thể tải xuống đường ray tại đây http://www.google.com/fonts#UsePlace:use/Collection:Raleway, nhấp vào mũi tên xuống ở trên cùng bên phải của trang, giải nén và thêm phông chữ vào trang web của bạn.

Answer 2

Raleway được bao gồm trong gói bower TypoPRO.

Install nó với

bower install --save typopro 

Như bạn là người mới đến Bower, ở đây một số lời khuyên thêm:

Như thư mục bower_components thường loại trừ khỏi sự kiểm soát phiên bản, bạn có thể sao chép các tập tin bạn cần phải khác thư mục với một nhiệm vụ grunt.

Thêm một exportsOverride phần để bower.json:

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

Install grunt

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

và tạo 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']); 

}; 

Nhiệm vụ grunt bower:install sẽ chạy bower install và sao chép tất cả các tệp từ web/TypoPRO-Raleway đến vendor/fonts (vendor từ targetDir trong Gruntfile.js và fonts từ exportsOverride trong bower.json). Bạn có thể thực hiện nhiệm vụ với

$ grunt bower:install 

Như bower:install được đăng ký như là một nhiệm vụ mặc định, bạn cũng có thể sử dụng cắt ngắn:

$ grunt 

Answer 3

Một giải pháp sẽ được sử dụng grunt thay vì bower quản lý của bạn phông chữ. Tôi tìm thấy hai plugin grunt tải xuống phông chữ từ Google cho bạn.

grunt-local-googlefont và grunt-goog-webfont-dl. Bạn có thể cài đặt chúng qua npm.

Có rất nhiều plugin khác nhau để tải xuống phông chữ từ các nguồn khác. Chỉ cần tìm kiếm font tại grunt's plugin search.

Answer 4

Giải pháp tốt nhất tôi tìm thấy với Bower là Google Fonts Bower Proxy (nguồn trên Github).Trước tiên, bạn sẽ nhận được chuỗi truy vấn bằng cách truy cập phông chữ của Google.

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

Sau đó, sử dụng Bower:

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

Tuỳ theo yêu cầu, nó có thể thực sự dễ dàng hơn chỉ đơn giản là nhập các phông chữ để CSS hoặc Sass của bạn thay vì đi cho các giải pháp dựa Chòi chơi.

Ngoài ra còn có google fonts bower package bao gồm tất cả phông chữ.