Rails 3, @ font-face thất bại trong sản xuất với firefox

Question

Tôi đang sử dụng font-awesome trong ứng dụng đường ray 3 và mọi thứ đều ổn trong chế độ phát triển, nhưng khi tôi chuyển sang Heroku, Firefox không hiển thị biểu tượng. , tôi thấy điều này:

• Chrome làm cho các biểu tượng tốt trong việc phát triển và sản xuất
• này chỉ ảnh hưởng đến FireFox (mặc dù tôi đã không cố gắng IE)
• ứng dụng là here, tôi 'd đánh giá cao nếu ai đó có thể xác nhận rằng đây không phải là chỉ xảy ra trên máy tính của tôi (để giúp tôi loại trừ một vấn đề bộ nhớ đệm localhost).
• Tất cả nội dung, bao gồm phông chữ và bảng định kiểu, được lưu trữ trên S3, sử dụng đá quý asset_sync.

Đây là những gì tôi đã thực hiện:

gia tăng như sau để phía trên cùng của font-awesome.css.scss: **

// font-awesome.css.scss 
@font-face { 
    font-family: 'FontAwesome'; 
    src: font-url("fontawesome-webfont.eot"); 
    src: font-url("fontawesome-webfont.eot?#iefix") format("eot"), 
     font-url("fontawesome-webfont.woff") format("woff"), 
     font-url("fontawesome-webfont.ttf") format("truetype"), 
     font-url("fontawesome-webfont.svg#FontAwesome") format("svg"); 
    font-weight: normal; 
    font-style: normal; 
} 

Sau đó, tôi đặt điều này trong ứng dụng. rb:

# application.rb 
config.assets.paths << Rails.root.join("app", "assets", "fonts") 
config.assets.precompile += %w(.svg .eot .woff .ttf) 

Cuối cùng tôi đã đặt tất cả 4 tệp phông trong app/assets/fonts.

Tôi thực sự muốn biết mình đang làm gì sai ở đây.

Answer 1

Tôi đã khắc phục sự cố của mình.

Từ this article, tôi biết được rằng:

Firefox từ chối mọi yêu cầu font chữ cross-site trừ một số tiêu đề cụ thể được thiết lập:

[ví dụ: Access-Control-Allow-Origin]

Và, từ this article:

Đáng buồn thay, ngay bây giờ S3 không cho phép bạn chỉ định các tiêu đề Access-Control-Allow-Origin rằng đối tượng của bạn có được ăn kèm với

Vì vậy, bạn có một vài lựa chọn:

1. phục vụ các phông chữ từ thư mục công cộng của ứng dụng của bạn, chứ không phải f rom S3
2. Phục vụ các phông chữ từ Rackspace, nơi bạn có thể thiết lập các tiêu đề
3. Nhúng phông chữ trong bạn như là một Base64 string

tôi đã đi với các tùy chọn đầu tiên vì đây là gonna được một trang web lưu lượng truy cập thấp, nhưng đây là cách viết hay về cách serve fonts from Rackspace trong khi đồng thời phân phát tất cả các nội dung khác từ S3.

---

UPDATE:

Amazon announced yesterday rằng họ bây giờ hỗ trợ Hội Chữ thập xứ Resource Sharing (CORS), vì vậy giải pháp đăng tải trên nên không còn cần thiết. developer guide của họ giải thích thêm.

Answer 2

Bạn có thể sử dụng trang web sau để Base64 Mã hóa phông chữ. Đã thử sử dụng FontSquirel nhưng nó không cho phép bạn mã hóa các phông chữ bản quyền/đã mua.

http://base64fonts.com/convert.php

Answer 3

Amazon S3 bây giờ hỗ trợ CORS, bạn không còn buộc phải nhúng phông chữ Base64 trong css của bạn (nó sẽ giúp bạn tiết kiệm một số băng thông :)

http://aws.amazon.com/about-aws/whats-new/2012/08/31/amazon-s3-announces-cross-origin-resource-sharing-CORS-support/

Answer 4

Bạn cũng có thể sử dụng một số phần mềm trung gian giá để phân phát trực tiếp các phông chữ với các tiêu đề kiểm soát quyền truy cập được yêu cầu tới mặt tiền.

# config/environment/production.rb 

    # Rack Headers 
    # Set HTTP Headers on static assets 

    config.assets.header_rules = { 
    :global => {'Cache-Control' => 'public, max-age=31536000'}, 
    :fonts => {'Access-Control-Allow-Origin' => '*'} 
    } 
    require 'rack_headers' 
    config.middleware.insert_before '::ActionDispatch::Static', '::Rack::Headers' 

----- 

# lib/rack_headers.rb 

require 'rack/utils' 

module Rack 
    class Headers 

    def initialize(app, options={}) 
     @app = app 

     default_path = Rails.application.config.assets.prefix || '/assets' 
     @asset_path = options.fetch(:path, default_path) 

     default_rules = Rails.application.config.assets.header_rules || {} 
     @rules = options.fetch(:header_rules, default_rules) 
    end 

    def call(env) 
     dup._call(env) 
    end 

    def _call(env) 
     status, @headers, response = @app.call(env) 
     @path = ::Rack::Utils.unescape(env['PATH_INFO']) 

     if @path.start_with?(@asset_path) 
     set_headers 
     end 

     [status, @headers, response] 
    end 

    def set_headers 
     @rules.each do |rule, headers| 
     case rule 
     when :global # Global 
      set_header(headers) 
     when :fonts # Fonts Shortcut 
      set_header(headers) if @path.match %r{\.(?:ttf|otf|eot|woff|svg)\z} 
     when Array # Extension/Extensions 
      extensions = rule.join('|') 
      set_header(result) if @path.match %r{\.(#{extensions})\z} 
     when String # Folder 
      set_header(result) if 
      (@path.start_with? rule || @path.start_with?('/' + rule)) 
     when Regexp # Flexible Regexp 
      set_header(result) if @path.match rule 
     else 
     end 
     end 
    end 

    def set_header(headers) 
     headers.each { |field, content| @headers[field] = content } 
    end 
    end 
end 

----- 

Giải pháp này sử dụng quy tắc để đặt tiêu đề khác nhau trên mọi tệp dựa trên quy tắc. Các quy tắc được mô tả ở đây: https://github.com/thomasklemm/butler#providing-rules-for-setting-http-headers. Về cơ bản bạn có thể làm bất cứ điều gì với Regexps, nhưng có các phím tắt cho các đuôi tập tin, thư mục, phông chữ web và tiêu đề toàn cục.

Answer 5

Chỉ cần thêm tiêu đề cho toàn bộ nhóm của bạn trong s3.

http://aws.typepad.com/aws/2012/08/amazon-s3-cross-origin-resource-sharing.html

Answer 6

Đây là cấu hình tôi thêm vào xô của tôi trong quản lý giao diện điều khiển AWS để cấu hình điều chéo này:

Đăng nhập để AWS -> AWS Management Console -> S3 -> Tìm Bucket của bạn - > nút tính Đẩy (kính lúp trên giấy vì một lý do) -> PERMISSIONS Clic ở bên phải -> "Edit CORS cấu hình"

<CORSConfiguration> 
    <CORSRule> 
     <AllowedOrigin>*</AllowedOrigin> 
     <AllowedMethod>GET</AllowedMethod> 
     <MaxAgeSeconds>3000</MaxAgeSeconds> 
     <AllowedHeader>Content-*</AllowedHeader> 
     <AllowedHeader>Host</AllowedHeader> 
    </CORSRule> 
</CORSConfiguration> 

Sau hai tiếng đồng hồ nghiên cứu ... :-(

Answer 7

Có bản cập nhật cho chủ đề này. Dường như không thể đặt CORS bằng cách tải tệp cors.xml lên một nhóm. Bây giờ bạn phải CLICK nó;). Chủ đề này đã tiết kiệm cho tôi một chút thời gian trong khi tìm kiếm giải pháp, nhưng mặt khác, tôi mất thời gian tải lên và thay đổi tệp cors.xml.

Giải pháp hiện tại là nhấp vào thuộc tính của thùng> Permissons> và sau đó nhấp vào Thêm cấu hình CORS