रेल 3, फ़ायरफ़ॉक्स

Question

के साथ उत्पादन में विफल होने वाला फ़ॉन्ट-फेस मैं रेलवे 3 ऐप में font-awesome का उपयोग कर रहा हूं, और सब कुछ विकास मोड में ठीक है, लेकिन जब मैं हेरोोकू को दबाता हूं, फ़ायरफ़ॉक्स आइकन प्रस्तुत करने में विफल रहता है, और इसके बजाय

• क्रोम प्रतीक विकास में ठीक है और उत्पादन
• यह सिर्फ फ़ायर्फ़ॉक्स (हालांकि मैं IE की कोशिश की नहीं है)
• अनुप्रयोग, here है मैं प्रभावित करता है प्रस्तुत करता है:, मैं यह देख सराहना करते हैं अगर कोई यह पुष्टि कर सकता है कि यह मेरी मशीन पर नहीं हो रहा है (स्थानीयहोस्ट कैशिंग मुद्दे को रद्द करने में मेरी सहायता के लिए)।
• फोंट और स्टाइलशीट समेत सभी संपत्तियां asset_sync मणि का उपयोग करके एस 3 पर होस्ट की जाती हैं।

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

  तब मैं आवेदन में रखते **:

यहाँ मैं क्या किया है है:

जोड़ा गया font-awesome.css.scss के शीर्ष पर निम्नलिखित। rb:

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

अंत में मैं app/assets/fonts में सभी 4 फ़ॉन्ट फ़ाइलों रखा।

मैं वास्तव में जानना चाहता हूं कि मैं यहां क्या कर रहा हूं।

Answer 1

मैंने अपनी समस्या तय की।

this article से, मुझे पता चला कि:

फ़ायरफ़ॉक्स सभी क्रॉस साइट फॉन्ट अनुरोध को खारिज कर दिया है जब तक कि कुछ विशिष्ट हेडर सेट कर रहे हैं:

[यानी पहुंच-नियंत्रण-अनुमति दें-उत्पत्ति]

और, this article से:

दुख की बात है, अभी S3 आप पहुंच-नियंत्रण-अनुमति दें-उत्पत्ति हैडर कि आपके वस्तुओं मिलता है निर्दिष्ट करने के लिए अनुमति नहीं है

के साथ परोसा जाता तो तुम पास कुछ विकल्प हैं:

1. को अपने ऐप्लिकेशन के सार्वजनिक फ़ोल्डर से फोंट की सेवा, च नहीं रॉम S3
2. रैकस्पेस है, जहां आप हेडर
3. एम्बेड फॉन्ट अपने में एक Base64 string

मैं पहली बार विकल्प के साथ के बाद से यह एक होने वाला है चले जाते हैं जितना सेट कर सकते हैं से फोंट की सेवा कम यातायात साइट, लेकिन serve fonts from Rackspace पर एक अच्छी तरह से लिखना है जबकि साथ ही साथ S3 से अन्य सभी संपत्तियों की सेवा करना।

---

अद्यतन:

अमेज़न announced yesterday कि वे अब क्रॉस उत्पत्ति रिसोर्स शेयरिंग (CORS), तो समाधान ऊपर तैनात नहीं रह आवश्यक होना चाहिए समर्थन करते हैं। उनके developer guide और बताते हैं।

Answer 2

आप निम्नलिखित साइट का उपयोग बेस 64 एन्कोड करने के लिए कर सकते हैं। FontSquirel का उपयोग करने का प्रयास किया लेकिन यह आपको कॉपीराइट/खरीदे गए फोंट को एन्क्रिप्ट नहीं करने देता है।

http://base64fonts.com/convert.php

Answer 3

अमेज़न S3 अब CORS समर्थन करते हैं, आप अब अपने सीएसएस में Base64 फोंट एम्बेड करने के लिए मजबूर कर रहे हैं (यह आप कुछ बैंडविड्थ :)

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

Answer 4

तुम भी उपयोग कर सकते हैं की बचत होगी क्लाउडफ्रंट पर आवश्यक एक्सेस-कंट्रोल हेडर के साथ सीधे फोंट की सेवा करने के लिए कुछ रैक मिडलवेयर।

# 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 

----- 

यह समाधान नियमों के आधार पर प्रत्येक फ़ाइल पर विभिन्न शीर्षलेख सेट करने के लिए नियमों का उपयोग करता है। नियम यहां वर्णित हैं: https://github.com/thomasklemm/butler#providing-rules-for-setting-http-headers। असल में आप Regexps के साथ कुछ भी कर सकते हैं, लेकिन फाइल एंडिंग, फ़ोल्डर्स, वेब फोंट और ग्लोबल हेडर के लिए शॉर्टकट हैं।

Answer 5

बस अपनी पूरी बाल्टी एस 3 में हेडर जोड़ें।

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

Answer 6

यह विन्यास मैं एडब्ल्यूएस प्रबंधन कंसोल में मेरी बाल्टी इस पार बात को कॉन्फ़िगर करने के लिए जोड़ा है: एडब्ल्यूएस में

प्रवेश करें -> एडब्ल्यूएस प्रबंधन कंसोल -> S3 -> अपने बाल्टी खोजें - > पुश गुण बटन (किसी कारण से कागज पर आवर्धक लेंस) - सही पर> Clic अनुमति -> "संपादित करें CORS विन्यास"

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

शोध के दो घंटे के बाद ... :-(

Answer 7

इस धागे के लिए एक अद्यतन है। ऐसा लगता है कि cors.xml फ़ाइल को बाल्टी में अपलोड करके CORS सेट करना संभव नहीं है। अब आपको इसे क्लिक करना होगा;)। इस धागे ने मुझे समाधान की तलाश करते समय कुछ समय बचाया, लेकिन दूसरी ओर मैंने cors.xml फ़ाइल को अपलोड करने और बदलने में कुछ समय खो दिया।

वर्तमान समाधान एक बाल्टी के गुण पर क्लिक करने के> अनुमतियां> और फिर क्लिक करें CORS विन्यास