Raylar 3, @ font-face firefox ile üretilemeyen

Question

Bir rayda 3 uygulamada font-awesome kullanıyorum ve geliştirme modunda her şey yolunda, ancak Heroku'ya bastığımda, Firefox simgeleri gösteremez ve bunun yerine

• Krom Bu sadece FireFox (IE denedim değil rağmen)
• uygulaması I here olduğunu etkileyen gelişiminde ince simgeler ve üretim
• vermektedir: Ben bunu görmek teşekkür ederim Birisi bunun makinemde olmadigini onaylayabilirse (localhost önbellekleme sorununu yardim etmeme yardimci olmak için).
• Yazı tipi ve stil sayfası dahil olmak üzere tüm öğeler, asset_sync gem kullanılarak S3 üzerinde barındırılmaktadır.

İşte yaptığım budur:

Eklendi font-awesome.css.scss üstüne aşağıdaki: **

// 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; 
} 

Sonra uygulamada bu koydu. rb:

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

Sonda gelen ben app/assets/fonts tüm 4 yazı dosyaları yerleştirilir.

Burada neyi yanlış yaptığımı bilmek isterim.

Answer 1

Sorunumu giderdim. Bazı özel başlıklar ayarlanır sürece

Firefox tüm siteler arası yazı isteklerini reddeder:

this article, ben öğrendim

[yani this article Erişim-Control-Allow-Origin]

Ve:

Ne yazık ki, şu anda S3 Eğer nesneleri almak Access-Control-Allow-Origin başlığını belirtmek izin vermiyor

ile servis Yani birkaç seçenek vardır:

1. uygulamanızın ortak klasörden fontları Serve, f değil rom S3
2. Eğer bu sana olacak beri ilk seçeneği ile gidince bir Base64 string

olarak Gözlerinde farklı başlıklarını

yerleştir yazı tipi ayarlayabilirsiniz Rackspace, gelen yazı tiplerini Serve Düşük trafikli site, ama burada, S3'ten diğer tüm varlıklara aynı anda hizmet verirken, serve fonts from Rackspace'a nasıl yazılacağı konusunda güzel bir mektup yazıyor.

---

GÜNCELLEME:

Amazon announced yesterday şimdi Çapraz Kökenli Kaynak Paylaşımı (CORS), bu yüzden artık gerekli olmalıdır yukarıda yayınlanan çözümü destekliyor. Onların developer guide daha fazlasını açıklıyor.

Answer 2

Aşağıdaki siteyi Base64 için Bir yazı tipini kodlayın. FontSquirel kullanarak denediniz, ancak telif hakkı/satın alınmış yazı tiplerini şifrelemenize izin vermez.

http://base64fonts.com/convert.php

Answer 3

Amazon S3 şimdi CORS'yi desteklemek, artık css BASE64 fontları gömmek zorunda konum (size bazı bant genişliği :)

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

Answer 4

de kullanabilirsiniz kurtaracak fontları, gerekli erişim kontrolü başlıklarıyla doğrudan cloudfront'a sunmak için bazı raf ara katman yazılımları.

# 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 

----- 

Bu çözüm kurallara dayalı her kayıtlarında farklı başlıklarını ayarlamak için kurallar kullanır. Kurallar burada açıklanmaktadır: https://github.com/thomasklemm/butler#providing-rules-for-setting-http-headers. Temel olarak Regexps ile her şeyi yapabilirsiniz, ancak dosya sonları, klasörler, web fontları ve global başlıklar için kısayollar vardır.

Answer 5

Tüm paketinizin başlığını s3'e eklemeniz yeterlidir.

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

Answer 6

bu özelliktir çapraz şeyi yapılandırmak için AWS yönetim konsolunda benim kova eklenen yapılandırması: AWS için

Günlüğü -> AWS Yönetim Konsolu -> S3 -> Lütfen Bucket bul - > Basmalı özellikleri düğmesine (nedense kağıt üzerinde büyüteç) -> Clic İZİNLER sağda -> "Edit CORS yapılandırması" araştırmaların iki saat sonra

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

... :-(

Answer 7

Bu konu için bir güncelleme var. Bir kovaya cors.xml dosyası yükleyerek CORS ayarlamak mümkün görünmüyor. Şimdi bunu TIKLAYIN;). Bu iş parçacığı bir çözüm ararken biraz zaman harcadı, ancak diğer yandan cors.xml dosyasını yükleyip değiştirirken zaman kaybettim.

akım çözüm CORS Yapılandırma