रेल 4: उत्पादन में फोंट क्यों लोड नहीं हो रहे हैं?

Question

मैं उत्पादन में अपने रेल 4 ऐप में फोंट लोड नहीं कर सकता, यह सामान्य रूप से विकास में काम करता है।

तैनाती करते समय सर्वर पर संपत्ति प्रीकंपल की जाती है।

मैं

app/assets/fonts

में मेरी फोंट है मेरे app.css:

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

मेरी production.rb में मेरे पास है:

config.assets.precompile << Proc.new { |path| 
    if path =~ /\.(eot|svg|ttf|woff)\z/ 
    true 
    end 
} 

Answer 1

हम इस समस्या को पिछले था सप्ताह - समस्या यह है कि आपकी संपत्तियों को एमडी 5 हैश पर रखने के लिए संकलित किया जाएगा, whils आपका मानक सीएसएस अभी भी उनके "मानक" नामों की तलाश करेगा। यह छवियों & फोंट के साथ एक समस्या है।

@font-face { 
    font-family: 'akagi'; 
    src: asset_url('fonts/akagi-th-webfont.eot'); 
    src: asset_url('fonts/akagi-th-webfont.eot?#iefix') format('embedded-opentype'), 
     asset_url('fonts/akagi-th-webfont.woff') format('woff'), 
     asset_url('fonts/akagi-th-webfont.ttf') format('truetype'), 
     asset_url('fonts/akagi-th-webfont.svg#akagithin') format('svg'); 
    font-weight: 300; 
    font-style: normal; 
} 

इस तरह आप गतिशील रूप से संपत्ति लोड करने के लिए scss फ़ाइलों का उपयोग करना चाहिए का एक उदाहरण है। इन फ़ाइलों को संकलित किया गया है (या तो पुश या इनिट के दौरान) अपनी .css फ़ाइलों में, सभी अपनी संपत्तियों के साथ सही ढंग से समन्वयित होते हैं।

हम Heroku साथ आप के लिए एक ऐसी ही समस्या थी, और यह /stylesheets/layout/fonts.css.scss में हमारे फ़ाइलें रखने और फिर बुला

@import '/layout/fonts'; 

हम अपने आवेदन बुलाया द्वारा काम कर पाने में कामयाब .css -> application.css.scss @import function

Answer 2

का समर्थन करने के लिए यहां एक सामान्य तरीका है कि किसी भी पुस्तकालय के लिए इस समस्या का निवारण कैसे करें। स्थानीय

1. पर

   पुन: पेश त्रुटि भागो उत्पादन

   1. पर सर्वर रेल config/environments/production.rb

      # Rails 4 production 
          # config.serve_static_files = true 
          # Rails 5, Uncomment to run production on local 
          # config.log_level = :debug 
          config.public_file_server.enabled = true 
      

   2. पर पर टर्मिनल rake assets:precompile

   3. इस टर्मिनलपर

2. आप

अवहेलना फ़ॉन्ट परिवार

1. application.css जरूरतों application.scss को नाम बदलने की वेब ब्राउज़र पर त्रुटि देखना चाहिए के बाद से asset-url

2. उपयोग किया जाएगा फोंट पर precompile में जोड़े फ़ाइल config/initializers/assets.rb:

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

3. अपनी सीएसएस लाइब्रेरी के अंदर फ़ॉन्ट फेस परिभाषा की तलाश करें और इसे application.scss पर कॉपी करें।यह होना चाहिए कुछ की तरह:

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

4. को बदलें:

   @font-face { 
       font-family: 'my-library'; 
       src: asset-url('my-library/fonts/my-library.eot'); 
       src: 
       asset-url('my-library/fonts/my-library.eot?#iefix') format('embedded-opentype'), 
       asset-url('my-library/fonts/my-library.woff2') format('woff2'), 
       asset-url('my-library/fonts/my-library.ttf') format('truetype'), 
       asset-url('my-library/fonts/my-library.woff') format('woff'), 
       asset-url('my-library/fonts/my-library.svg?#my-library') format('svg'); 
       font-weight: normal; 
       font-style: normal; 
   } 
   

क्या परिवर्तन किए गए

1. उपयोग asset-url बजाय url
2. बदलें ../fonts या के समान एक रास्ता है कि asset-url समझता है।

क्या पथ संपत्ति-यूआरएल

पर डाल

पता करने के लिए जो रास्ता asset-url समझता है, सांत्वना रेल और Rails.application.assets.paths प्रवेश करने के लिए जाना। अपने फोंट /path/2/my-library/fonts/ पर कर रहे हैं तो asset-url('my-library/fonts/my-library.eot') का उपयोग

[ 
    '/path/1', 
    '/path/2', 
    '/path/3', 
] 

: आप की तरह कुछ मिल जाएगा।

यानी आप उस भाग को हटा दें जिसे आपने Rails.application.assets.paths पर पाया था।

की जाँच करें आप विकास पर सही रास्ते लिखा

रेल कंसोल पर:

helper.asset_url('my-library/fonts/my-library.eot') 

लौट चाहिए:

"/assets/my-library/fonts/my-library-2517b97e2c0e1e6c8ceb9dd007015f897926bc504154137281eec4c1a9f9bdc9.eot" 

नोट अनुगामी /assets/ और अंतिम भाग में डाइजेस्ट।

Answer 3

1: - अपने सभी फोंट ऐप/संपत्ति/फोंट फ़ोल्डर पर रखें।

2: - रेक संपत्ति के बाद: प्रीकंपाइल RAILS_ENV = उत्पादन आपके सभी फोंट को पचाने के साथ सार्वजनिक/संपत्ति फ़ोल्डर में प्रीकंपल किया जाएगा।

3: - एसआरएसएस फाइलों में src: url ('fontname.eot') का उपयोग करने के बजाय src: font_url ('fontname.eot') का उपयोग करें।