Sử dụng phông chữ với đường dẫn tài sản Rails

Tôi có một số phông chữ được cấu hình trong tệp Scss của mình như vậy:

@font-face {
  font-family: 'Icomoon';
  src: asset-url('icoMoon.eot?#iefix', font) format('embedded-opentype'),
       asset-url('icoMoon.woff', font) format('woff'),
       asset-url('icoMoon.ttf', font)  format('truetype'),
       asset-url('icoMoon.svg#Icomoon', font) format('svg');
}

Tệp phông chữ thực tế được lưu trữ trong / app / nội dung / phông chữ /

Tôi đã thêm vào config.assets.paths << Rails.root.join("app", "assets", "fonts")tập tin application.rb của mình

và nguồn CSS biên dịch như sau:

@font-face {
  font-family: 'Icomoon';
  src: url(/assets/icoMoon.eot?#iefix) format("embedded-opentype"), url(/assets/icoMoon.woff) format("woff"), url(/assets/icoMoon.ttf) format("truetype"), url(/assets/icoMoon.svg#Icomoon) format("svg");
}

Nhưng khi tôi chạy ứng dụng, các tập tin phông chữ không được tìm thấy. Các bản ghi:

Bắt đầu NHẬN "/assets/icoMoon.ttf" cho 127.0.0.1 lúc 2012-06-05 23:21:17 +0100 Tài sản được phục vụ /icoMoon.ttf - 404 Không tìm thấy (13ms)

Tại sao đường ống tài sản không làm phẳng các tệp phông chữ thành / tài sản?

Mọi người có ý kiến ​​gì không?

Trân trọng, Neil

Thông tin thêm:

Khi kiểm tra bảng điều khiển đường ray cho các đường dẫn tài sản và biên dịch tài sản, tôi nhận được như sau:

1.9.2p320 :001 > y Rails.application.config.assets.precompile
---
- !ruby/object:Proc {}
- !ruby/regexp /(?:\/|\\|\A)application\.(css|js)$/
- .svg
- .eot
- .woff
- .ttf
=> nil



1.9.2p320 :002 > y Rails.application.config.assets.paths
---
- /Users/neiltonge/code/neiltonge/app/assets/fonts
- /Users/neiltonge/code/neiltonge/app/assets/images
- /Users/neiltonge/code/neiltonge/app/assets/javascripts
- /Users/neiltonge/code/neiltonge/app/assets/stylesheets
- /Users/neiltonge/code/neiltonge/vendor/assets/images
- /Users/neiltonge/code/neiltonge/vendor/assets/javascripts
- /Users/neiltonge/code/neiltonge/vendor/assets/stylesheets
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/jquery-rails-2.0.0/vendor/assets/javascripts
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/coffee-rails-3.2.1/lib/assets/javascripts
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/bourbon-1.3.0/app/assets/stylesheets
- !ruby/object:Pathname
  path: /Users/neiltonge/code/neiltonge/app/assets/fonts
 => nil

1. Nếu phiên bản Rails của bạn nằm giữa > 3.1.0và < 4, hãy đặt phông chữ của bạn vào bất kỳ thư mục nào sau đây:

   • app/assets/fonts
   • lib/assets/fonts
   • vendor/assets/fonts

   
   

   Đối với phiên bản Rails > 4, bạn phải đặt phông chữ của mình trong app/assets/fontsthư mục.

   Lưu ý: Để đặt phông chữ bên ngoài các thư mục được chỉ định này, hãy sử dụng cấu hình sau:

   config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/

   Đối với các phiên bản Rails > 4.2, nên thêm cấu hình này vào config/initializers/assets.rb.

   Tuy nhiên, bạn cũng có thể thêm nó vào config/application.rbhoặcconfig/production.rb

2. Khai báo phông chữ của bạn trong tệp CSS của bạn:

   @font-face {
     font-family: 'Icomoon';
     src:url('icomoon.eot');
     src:url('icomoon.eot?#iefix') format('embedded-opentype'),
       url('icomoon.svg#icomoon') format('svg'),
       url('icomoon.woff') format('woff'),
       url('icomoon.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
   }

   Đảm bảo phông chữ của bạn được đặt tên chính xác giống như trong phần URL của khai báo. Chữ in hoa và dấu chấm câu quan trọng. Trong trường hợp này, phông chữ nên có tên icomoon.

3. Nếu bạn đang sử dụng Sass hoặc Less with Rails > 3.1.0(tệp CSS của bạn có .scsshoặc .lessphần mở rộng), thì hãy thay đổi url(...)khai báo phông chữ thành font-url(...).

   Mặt khác, tệp CSS của bạn phải có phần mở rộng .css.erbvà khai báo phông chữ phải là url('<%= asset_path(...) %>').

   Nếu bạn đang sử dụng Rails > 3.2.1, bạn có thể sử dụng font_path(...)thay vì asset_path(...). Người trợ giúp này thực hiện chính xác điều tương tự nhưng rõ ràng hơn.

4. Cuối cùng, sử dụng phông chữ của bạn trong CSS giống như bạn đã khai báo nó trong font-familyphần này. Nếu nó được khai báo viết hoa, bạn có thể sử dụng nó như thế này:

   font-family: 'Icomoon';

Bây giờ đây là một twist:

Bạn nên đặt tất cả các phông chữ vào trong app/assets/fonts/khi chúng SILL được biên dịch trước theo giai đoạn và sản xuất theo mặc định, chúng sẽ được biên dịch trước khi được đẩy lên heroku .

Các tệp phông chữ được đặt vendor/assetssẽ KHÔNG được biên dịch trước khi dàn dựng hoặc sản xuất theo mặc định - chúng sẽ thất bại trên heroku . Nguồn!

- @plapier, thinkbot / bourbon

Tôi tin tưởng mạnh mẽ rằng việc đưa phông chữ của nhà cung cấp vào vendor/assets/fonts có ý nghĩa hơn nhiều so với việc đưa chúng vào app/assets/fonts. Với 2 dòng cấu hình bổ sung này, điều này đã làm việc tốt với tôi (trên Rails 4):

app.config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts')  
app.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

- @jhilden, thinkbot / bourbon

Tôi cũng đã thử nó trên rails 4.0.0. Trên thực tế, dòng cuối cùng là đủ để biên dịch phông chữ an toàn từ vendorthư mục. Mất một vài giờ để tìm ra nó. Hy vọng nó sẽ giúp được ai đó.

Nếu bạn không muốn theo dõi việc di chuyển phông chữ của mình xung quanh:

# Adding Webfonts to the Asset Pipeline
config.assets.precompile << Proc.new { |path|
  if path =~ /\.(eot|svg|ttf|woff)\z/
    true
  end
}

Bạn cần sử dụng font-urltrong khối khuôn mặt @ phông chữ của mình, không phảiurl

@font-face {
font-family: 'Inconsolata';
src:font-url('Inconsolata-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

cũng như dòng này trong application.rb, như bạn đã đề cập (đối với phông chữ trong app/assets/fonts

config.assets.paths << Rails.root.join("app", "assets", "fonts")

Đây là cách tiếp cận của tôi để sử dụng phông chữ trong đường dẫn tài sản:

1) Đặt tất cả các tập tin phông chữ của bạn dưới app/assets/fonts/, thực sự bạn không bị hạn chế để đặt nó dưới fontstên thư mục. Bạn có thể đặt bất kỳ tên thư mục con nào bạn thích. Ví dụ app/assets/abchay app/assets/anotherfonts. Nhưng tôi rất khuyên bạn nên đặt nó dưới app/assets/fonts/cho cấu trúc thư mục tốt hơn.

2) Từ tệp sass của bạn, sử dụng trình trợ giúp sass font-pathđể yêu cầu tài sản phông chữ của bạn như thế này

@font-face {
    font-family: 'FontAwesome';
    src: url(font-path('fontawesome-webfont.eot') + '?v=4.4.0');
    src: url(font-path('fontawesome-webfont.eot') + '?#iefix&v=4.4.0') format('embedded-opentype'),
         url(font-path('fontawesome-webfont.woff2') + '?v=4.4.0') format('woff2'),
         url(font-path('fontawesome-webfont.woff') + '?v=4.4.0') format('woff'),
         url(font-path('fontawesome-webfont.ttf') + '?v=4.4.0') format('truetype'),
         url(font-path('fontawesome-webfont.svg') + '?v=4.4.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

3) Chạy bundle exec rake assets:precompiletừ máy cục bộ của bạn và xem kết quả application.css của bạn. Bạn sẽ thấy một cái gì đó như thế này:

@font-face {
    font-family: 'FontAwesome';
    src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?v=4.4.0");
    src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?#iefix&v=4.4.0") format("embedded-opentype"), url("/assets/fontawesome-webfont-3c4a1bb7ce3234407184f0d80cc4dec075e4ad616b44dcc5778e1cfb1bc24019.woff2" "?v=4.4.0") format("woff2"), url("/assets/fontawesome-webfont-a7c7e4930090e038a280fd61d88f0dc03dad4aeaedbd8c9be3dd9aa4c3b6f8d1.woff" "?v=4.4.0") format("woff"), url("/assets/fontawesome-webfont-1b7f3de49d68b01f415574ebb82e6110a1d09cda2071ad8451bdb5124131a292.ttf" "?v=4.4.0") format("truetype"), url("/assets/fontawesome-webfont-7414288c272f6cc10304aa18e89bf24fb30f40afd644623f425c2c3d71fbe06a.svg" "?v=4.4.0#fontawesomeregular") format("svg");
    font-weight: normal;
    font-style: normal;
}

Nếu bạn muốn biết thêm về cách thức hoạt động của đường ống tài sản, bạn có thể truy cập vào hướng dẫn đơn giản sau: https://designcode.commandrun.com/rails-asset-pipeline-simple-guide-830e2e666f6c#.6lejlayk2

Tôi đã gặp vấn đề này trên Rails 4.2 (với ruby ​​2.2.3) và phải chỉnh sửa một phần phông chữ _paths.scss tuyệt vời để xóa tham chiếu $fa-font-pathvà xóa dấu gạch chéo về phía trước. Sau đây đã bị hỏng:

@font-face {
  font-family: 'FontAwesome';
  src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
  src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
    font-url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
    font-url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
    font-url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
    font-url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Và các công việc sau:

@font-face {
  font-family: 'FontAwesome';
  src: font-url('fontawesome-webfont.eot?v=#{$fa-version}');
  src: font-url('fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
    font-url('fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
    font-url('fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
    font-url('fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
    font-url('fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Một cách khác là chỉ cần loại bỏ dấu gạch chéo theo sau được nội suy $fa-font-pathvà sau đó xác định $fa-font-pathlà một chuỗi rỗng hoặc thư mục con với dấu gạch chéo phía trước (khi cần).

Hãy nhớ biên dịch lại tài sản và khởi động lại máy chủ của bạn khi cần. Ví dụ: trên thiết lập hành khách:

prompt> rake assets:clean; rake assets:clobber
prompt> RAILS_ENV=production RAILS_GROUPS=assets rake assets:precompile
prompt> service passenger restart

Sau đó tải lại trình duyệt của bạn.

Tôi đang sử dụng Rails 4.2 và không thể hiển thị các biểu tượng có thể xem được. Các hộp nhỏ đang hiển thị, thay vì (+) trên các hàng bị sập và các mũi tên sắp xếp nhỏ mà tôi mong đợi. Sau khi nghiên cứu thông tin ở đây, tôi đã thực hiện một thay đổi đơn giản cho mã của mình: xóa thư mục phông chữ trong css. Đó là, thay đổi tất cả các mục css như thế này:

src:url('fonts/footable.eot');

trông như thế này:

src:url('footable.eot');

Nó đã làm việc. Tôi nghĩ rằng Rails 4.2 đã giả sử thư mục phông chữ, vì vậy việc chỉ định lại nó trong mã css làm cho các tệp phông chữ không được tìm thấy. Hi vọng điêu nay co ich.

Tôi đã gặp một vấn đề tương tự khi tôi nâng cấp ứng dụng Rails 3 của mình lên Rails 4 gần đây. Phông chữ của tôi không hoạt động chính xác như trong Rails 4+, chúng tôi chỉ được phép giữ các phông chữ trong app/assets/fontsthư mục. Nhưng ứng dụng Rails 3 của tôi có một tổ chức phông chữ khác. Vì vậy, tôi đã phải định cấu hình ứng dụng để nó vẫn hoạt động với Rails 4+ có phông chữ của tôi ở một nơi khác ngoài app/assets/fonts. Tôi đã thử một vài giải pháp nhưng sau khi tôi tìm thấy viên ngọc tài sản không ngu ngốc , nó đã làm cho nó trở nên dễ dàng.

Thêm đá quý này bằng cách thêm dòng sau vào Gemfile của bạn:

gem 'non-stupid-digest-assets'

Sau đó chạy:

bundle install

Và cuối cùng thêm dòng sau vào tệp config / khởi tạo / non_digest_assets.rb của bạn :

NonStupidDigestAssets.whitelist = [ /\.(?:svg|eot|woff|ttf)$/ ]

Đó là nó. Điều này giải quyết vấn đề của tôi độc đáo. Hy vọng điều này sẽ giúp những người gặp phải vấn đề tương tự như tôi.

Dưới đây là bản repo các trình diễn phục vụ phông chữ tùy chỉnh với Rails 5.2 hoạt động trên Heroku. Nó đi xa hơn và tối ưu hóa việc phục vụ các phông chữ nhanh nhất có thể theo https://www.webpagetest.org/

https://github.com/nzoschke/edgecors

Để bắt đầu tôi chọn các mảnh từ câu trả lời ở trên. Đối với Rails 5.2+, bạn không cần cấu hình đường ống tài sản bổ sung.

Đường ống tài sản và SCSS

• Đặt phông chữ vào app/assets/fonts
• Đặt @font-facetờ khai trong một tệp scss và sử dụng trình font-urltrợ giúp

Từ app/assets/stylesheets/welcome.scss:

@font-face {
  font-family: 'Inconsolata';
  src: font-url('Inconsolata-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Inconsolata";
  font-weight: bold;
}

Phục vụ từ CDN với CORS

Tôi đang sử dụng CloudFront, được thêm bằng addon Heroku Edge .

Trước tiên, định cấu hình tiền tố CDN và Cache-Controlcác tiêu đề mặc định trong production.rb:

Rails.application.configure do
  # e.g. https://d1unsc88mkka3m.cloudfront.net
  config.action_controller.asset_host = ENV["EDGE_URL"]

  config.public_file_server.headers = {
    'Cache-Control' => 'public, max-age=31536000'
  }
end

Nếu bạn cố truy cập phông chữ từ URL herokuapp.com đến URL CDN, bạn sẽ gặp lỗi CORS trong trình duyệt của mình:

Truy cập vào phông chữ tại ' https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf ' từ nguồn gốc ' https://edgecors.herokuapp.com ' đã bị chặn bởi chính sách CORS: Không 'Kiểm soát truy cập-Cho phép Tiêu đề -Origin 'hiện diện trên tài nguyên được yêu cầu. edgecors.herokuapp.com/ NHẬN https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf net :: ERR_FAILED

Vì vậy, hãy định cấu hình CORS để cho phép truy cập phông chữ từ Heroku vào URL CDN:

module EdgeCors
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.2

    config.middleware.insert_after ActionDispatch::Static, Rack::Deflater

    config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins %w[
          http://edgecors.herokuapp.com
          https://edgecors.herokuapp.com
        ]
        resource "*", headers: :any, methods: [:get, :post, :options]
      end
    end
  end
end

Phục vụ tài sản phông chữ gzip

Đường ống tài sản xây dựng một .ttf.gztệp nhưng không phục vụ nó. Bản vá khỉ này thay đổi danh sách trắng gzip đường ống tài sản thành một danh sách đen:

require 'action_dispatch/middleware/static'

ActionDispatch::FileHandler.class_eval do
  private

    def gzip_file_path(path)
      return false if ['image/png', 'image/jpeg', 'image/gif'].include? content_type(path)
      gzip_path = "#{path}.gz"
      if File.exist?(File.join(@root, ::Rack::Utils.unescape_path(gzip_path)))
        gzip_path
      else
        false
      end
    end
end

Kết quả cuối cùng là một tệp phông chữ tùy chỉnh được app/assets/fontscung cấp từ bộ đệm CloudFront tồn tại lâu.

Trong trường hợp của tôi, câu hỏi ban đầu được sử dụng asset-urlmà không có kết quả thay vì thuộc urltính css đơn giản . Sử dụng asset-urlkết thúc làm việc cho tôi trong Heroku. Cộng với việc đặt phông chữ trong /assets/fontsthư mục và gọi asset-url('font.eot')mà không cần thêm bất kỳ thư mục con hoặc bất kỳ cấu hình nào khác vào nó.

Nếu bạn có một tệp có tên là scaffold.css.scss, thì có khả năng đó sẽ ghi đè tất cả những điều tùy chỉnh bạn đang làm trong các tệp khác. Tôi nhận xét ra tập tin đó và đột nhiên mọi thứ hoạt động. Nếu không có gì quan trọng trong tập tin đó, bạn cũng có thể xóa nó đi!

chỉ cần đặt phông chữ của bạn trong thư mục ứng dụng / tài sản / phông chữ và đặt đường dẫn tự động tải khi ứng dụng bắt đầu sử dụng viết mã trong application.rb

config.assets.paths << Rails.root.join ("ứng dụng", "tài sản", "phông chữ") và

sau đó sử dụng đoạn mã sau trong css.

@mặt chữ {

 font-family: 'icomoon';
 src: asset-url('icomoon.eot');
 src: asset-url('icomoon.eot') format('embedded-opentype'),
      asset-url('icomoon.woff') format('woff'),
      asset-url('icomoon.ttf') format('truetype'),
      asset-url('icomoon.svg') format('svg');
 font-weight: normal;
 font-style: normal;

}

Hãy thử một lần.

Cảm ơn