रेल संपत्ति पाइपलाइन के साथ फोंट का उपयोग करना

Question

मेरी स्कैस फ़ाइल में कुछ फोंट कॉन्फ़िगर किए जा रहे हैं जैसे:

@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');
}

वास्तविक फ़ॉन्ट फ़ाइल / एप्लिकेशन / संपत्ति / फ़ॉन्ट / में संग्रहीत हैं

मैंने config.assets.paths << Rails.root.join("app", "assets", "fonts")अपने application.rb फ़ाइल में जोड़ा है

और सीएसएस स्रोत का संकलन इस प्रकार है:

@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");
}

लेकिन जब मैं ऐप चलाता हूं तो फॉन्ट फाइलें नहीं मिल रही हैं। लॉग:

2012-06-05 23:21:17 पर ऑनलाइन 127.0.0.1 के लिए "/assets/icoMoon.ttf" शुरू किया संपत्ति /icoMoon.ttf - 404 नहीं मिला (13ms)

एसेट पाइप लाइन फॉन्ट फाइलों को सिर्फ / एसेट्स में समतल क्यों नहीं कर रहा है?

कोई विचार लोग?

तरह का संबंध है, नील

अधिक जानकारी:

जब मैं संपत्ति पथ और संपत्ति के लिए रेल कंसोल की जाँच कर रहा हूँ तो मुझे निम्नलिखित मिलेगा:

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

Comments

आप font-urlरेल में एससीएसएस में सहायक हैं।

— हौलेथ

दुर्भाग्य से इससे कोई फर्क नहीं पड़ता। इसलिए मेरा सवाल अभी भी खड़ा है

— rctneil

मैंने stackoverflow.com/a/40898227/1197775 पर इस समस्या के निदान और समाधान के लिए एक सामान्य तरीका लिखा ।

— साइटें

Answer 1

1. यदि आपका रेल संस्करण बीच में है > 3.1.0और < 4अपने फोंट को इनमें से किसी भी फ़ोल्डर में रखें:

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

   
   

   रेल संस्करणों के लिए > 4, आपको अपने फोंट को फ़ोल्डर में रखना होगाapp/assets/fonts ।

   नोट: इन निर्दिष्ट फ़ोल्डरों के बाहर फ़ॉन्ट रखने के लिए, निम्न कॉन्फ़िगरेशन का उपयोग करें:

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

   रेल संस्करणों के लिए > 4.2, इस कॉन्फ़िगरेशन को इसमें जोड़ने की सिफारिश की गई है config/initializers/assets.rb।

   हालाँकि, आप इसे या तो config/application.rb, या करने के लिए जोड़ सकते हैंconfig/production.rb

2. अपनी सीएसएस फ़ाइल में अपने फ़ॉन्ट को घोषित करें:

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

   सुनिश्चित करें कि आपके फ़ॉन्ट को घोषणा के URL भाग के समान ही नाम दिया गया है। पूंजी पत्र और विराम चिह्न अंक मायने रखते हैं। इस स्थिति में, फ़ॉन्ट का नाम होना चाहिए icomoon।

3. यदि आप रेल या लेस विथ रेल्स का उपयोग कर रहे हैं > 3.1.0(आपकी CSS फ़ाइल में विस्तार .scssया .lessविस्तार है), तो url(...)फ़ॉन्ट घोषणा में बदल दें font-url(...)।

   अन्यथा, आपकी सीएसएस फ़ाइल में एक्सटेंशन होना चाहिए .css.erb, और फ़ॉन्ट घोषणा होनी चाहिए url('<%= asset_path(...) %>')।

   यदि आप रेल का उपयोग कर रहे हैं > 3.2.1, तो आप font_path(...)इसके स्थान पर उपयोग कर सकते हैं asset_path(...)। यह सहायक बिल्कुल वैसा ही करता है लेकिन यह अधिक स्पष्ट है।

4. अंत में, अपने सीएसएस में अपने फ़ॉन्ट का उपयोग करें जैसे आपने इसे font-familyभाग में घोषित किया था । यदि इसे पूंजीकृत घोषित किया गया था, तो आप इसे इस तरह उपयोग कर सकते हैं:

   font-family: 'Icomoon';

Comments

क्या आपने अपना सर्वर पुनः आरंभ किया?

— आष्टाका

@NadeemYasin आपकी टिप्पणी के लिए धन्यवाद, मुझे भी यही समस्या थी। फ़ाइल के नाम उनमें सम्मोहित थे और जब मैंने हटाया कि यहाँ प्रस्तावित समाधान ने काम किया।

— त्सेगा

config.assets.precompile += %w( .svg .eot .woff .ttf )वास्तव में गलत है, आपको पूरी संपत्ति के नाम से मेल खाने वाली चीज को जोड़ने की जरूरत है। मेरे लिए एक regexp ने काम किया:config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

— सनी

खैर, अब जिस तरह से यह मेरे लिए काम करता है। तो या तो कोड की लाइन की आवश्यकता नहीं है या इस कॉन्फ़िगरेशन को सेट करने का तरीका रेल्स संस्करण (या कुछ और) पर निर्भर करता है। @ जैम ने पहले ही कहा था कि उसे चरण 2 पर कॉन्फिग को हटाना होगा इसलिए शायद हम यहां कुछ याद कर रहे हैं। यार, एसेट पाइपलाइन के साथ फोंट का उपयोग करना सरल होना चाहिए।

— अष्टक

चरण 2 को हटा दिया जाना चाहिए। रेल गाइड के अनुसार , config.assets.pathsSprockets संदर्भों के लिए है, यहां प्रासंगिक नहीं है। config.assets.precompileयह भी बेकार है क्योंकि "कम्पाइलिंग फाइल्स के लिए डिफॉल्ट मैचर में एप्लिकेशन / एसेट फोल्डर से Application.js, application.css और सभी गैर-जेएस / सीएसएस फाइलें (इसमें सभी इमेज एसेट्स अपने आप शामिल होंगे) शामिल हैं" ( यहां देखें )

— एरिक एल।

Answer 2

अब यहाँ एक मोड़ है:

आप रखूं में सभी फ़ॉन्ट app/assets/fonts/के रूप में वे जाएगा जब की ओर धकेल दिया द्वारा मचान और उत्पादन में precompiled हो डिफ़ॉल्ट-वे precompiled हो जाएगी Heroku ।

फ़ॉन्ट में रखा फ़ाइलें vendor/assetsजाएगा नहीं डिफ़ॉल्ट रूप से मचान या उत्पादन पर precompiled जा - वे पर असफल हो जायेगी Heroku । स्रोत!

- @ प्लैपियर, थॉटबोट / बॉर्बन

मेरा दृढ़ता से मानना ​​है कि वेंडर फोंट vendor/assets/fonts लगाने से बहुत अधिक समझ में आता है app/assets/fonts। अतिरिक्त विन्यास की इन 2 पंक्तियों के साथ इसने मेरे लिए अच्छा काम किया है (रेल 4 पर):

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

- @ ज़िल्डेन, थिंकबॉट / बॉर्बन

मैंने इसका परीक्षण भी किया है rails 4.0.0। वास्तव में अंतिम एक पंक्ति सुरक्षित रूप से vendorफ़ोल्डर से फोंटप्लिप करने के लिए पर्याप्त है । इसे जानने के लिए कुछ घंटों का समय लिया। आशा है कि यह किसी की मदद की।

Comments

+1 एजुगाइड्स .rubyonrails.org/… एसेट पाइपलाइन के लेआउट के बारे में बताता है और यह समझने में मदद करता है कि यह कैसे काम करता है। 2014-07-04 के अनुसार सही

— ज़ाचरी मोशनस्की

क्या आपको इन दोनों की आवश्यकता है? app.config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts') app.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/एक अन्य उत्तर पर एक टिप्पणी कहती है कि उत्तरार्द्ध दोनों का ध्यान रखता है।

— अहानजकद

यहां तक ​​कि रेल में 4.2 + -लैंड, मैं वास्तव में सोचता हूं कि app/assetssprockets और आउटपुट के रूप में संसाधित दोस्तों public/assets, जबकि vendor/assetsअभी भी संशोधन के बिना संपत्ति को तैनात करने के लिए उपयोगी हो सकता है; दोनों के उपयोग-मामले हैं। प्रतिशोध के पूरे सम्मेलन की गारंटी इस बात पर दी जाती है कि इससे कुछ नहीं होगा vendor/*। (हाँ, vendor/pluginsकोड-होर्डिंग, बंद-स्रोत उन्माद पूर्व मणि युग के साथ दुर्व्यवहार किया गया था और लोगों ने vendor/assets/javascriptsपूर्व-धौंकनी / रेल-परिसंपत्तियों में सिर्फ कॉपी-पेस्ट किए गए असंबद्ध जेएस ।)

सोच रहे लोगों के लिए; इसे फेंकेंconfig/initializers/assets.rb

— TJ Biddle

Answer 3

यदि आप अपने फोंट को इधर-उधर घुमाना नहीं चाहते हैं:

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

Comments

मुझे लगता है कि यह सबसे अच्छा समाधान है; जब तक आप उन फोंट को अधिकृत नहीं करते हैं जो वे संभवतः / विक्रेता / संपत्ति / फोंट में होते हैं - न कि / ऐप / एसेट / फोंट। यह दृष्टिकोण दोनों के लिए हल करता है, उपरोक्त नहीं

— केसी

@ कैसी: यह समाधान आपको वेंडर / परिसंपत्तियों के अंदर फोंट लगाने देता है। @ नथन कोलगेट: इसे सरल बनाया जा सकता है:config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

— सनी

@ सन्नी - मुझे पता है, इसीलिए मुझे लगता है कि यह स्वीकृत जवाब से बेहतर है

— केसी

इसके अलावा, आपको अपने रेगेक्स को \ Z - stackoverflow.com/questions/577653/…

— Casey

आप उस हैश से कैसे निपटते हैं जो रेल फ़ॉन्ट फ़ाइल पर लागू होती है?

— जेम्स मैकमोहन

Answer 4

आपको font-urlअपने @ फॉन्ट-फेस ब्लॉक में उपयोग करने की आवश्यकता है , नहींurl

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

साथ ही इस लाइन में application.rb, जैसा कि आपने उल्लेख किया है (फोंट के लिए app/assets/fonts

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

Comments

आपको प्रोडक्शन के लिए

— प्री

बिल्कुल नई रेल पर 4.2 ऐप, दोनों में src: url(someFont.ttf)और src: font-url(someFont.ttf)फाइल में होने पर काम किया app/assets/fonts। मेरे पास .scssडिफ़ॉल्ट रूप से एक्सटेंशन हैं। मुझे config.assets.paths में जोड़ने की आवश्यकता नहीं थी।

— डैनी

Answer 5

यहाँ परिसंपत्ति पाइपलाइन में फोंट का उपयोग करने के लिए मेरा दृष्टिकोण:

1) अपनी सभी फ़ॉन्ट फ़ाइल को नीचे रखें app/assets/fonts/, वास्तव में आप इसे fontsफ़ोल्डर नाम के तहत रखने के लिए प्रतिबंधित नहीं हैं । आप अपनी पसंद का कोई भी सबफ़ोल्डर नाम रख सकते हैं। जैसे app/assets/abcया app/assets/anotherfonts। लेकिन मैं आपको app/assets/fonts/बेहतर फ़ोल्डर संरचना के तहत इसे लगाने की अत्यधिक सलाह देता हूं ।

2) अपने sass फ़ाइल से, font-pathइस तरह अपनी फ़ॉन्ट संपत्ति का अनुरोध करने के लिए sass सहायक का उपयोग कर

@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) bundle exec rake assets:precompileअपने स्थानीय मशीन से चलाएं और अपना एप्लिकेशन देखें। परिणाम देखें। आपको कुछ इस तरह से देखना चाहिए:

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

यदि आप अधिक जानना चाहते हैं कि परिसंपत्ति पाइपलाइन कैसे काम करती है, तो आप निम्नलिखित सरल गाइड पर जा सकते हैं: https://designcode.commandrun.com/rails-asset-pipeline-simple-guide-830e2e666f6c#lejlayk2

Answer 6

मुझे यह समस्या रेल 4.2 (रूबी 2.2.3 के साथ) पर आ रही थी $fa-font-pathऔर एक प्रमुख फॉरवर्ड स्लैश को हटाने और हटाने के लिए आंशिक रूप से फ़ॉन्ट-भयानक _paths.scss को संपादित करना था । निम्नलिखित टूट गया था:

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

और निम्नलिखित काम करता है:

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

एक विकल्प यह होगा कि इंटरपोल के बाद आगे की स्लैश को हटा दें $fa-font-pathऔर फिर $fa-font-pathआगे स्लैश (आवश्यकतानुसार) को पीछे छोड़ते हुए एक खाली स्ट्रिंग या उपनिर्देशिका के रूप में परिभाषित करें ।

परिसंपत्तियों को फिर से इकट्ठा करने और आवश्यकतानुसार अपने सर्वर को पुनरारंभ करने के लिए याद रखें। उदाहरण के लिए, यात्री सेटअप पर:

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

फिर अपने ब्राउज़र को पुनः लोड करें।

Answer 7

मैं ४.३ रेल का उपयोग कर रहा हूं, और दिखाने के लिए फुटेबल आइकन नहीं मिल सका। ढही हुई पंक्तियों और (छोटे आकार के तीर) के बदले छोटे बॉक्स दिखाई दे रहे थे। यहां जानकारी का अध्ययन करने के बाद, मैंने अपने कोड में एक सरल बदलाव किया: सीएसएस में फ़ॉन्ट निर्देशिका को हटा दें। अर्थात्, सभी सीएसएस प्रविष्टियों को इस तरह बदलें:

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

इस तरह दिखना:

src:url('footable.eot');

इसने काम कर दिया। मुझे लगता है कि रेल 4.2 पहले से ही फॉन्ट डायरेक्टरी को मानती है, इसलिए सीएसएस कोड में इसे फिर से निर्दिष्ट करने से फॉन्ट फाइल नहीं मिलती। उम्मीद है की यह मदद करेगा।

Answer 8

हाल ही में जब मैंने अपने रेल 3 ऐप को रेल 4 में अपग्रेड किया था, तो मेरे पास एक समान मुद्दा था। मेरे फॉन्ट ठीक से काम नहीं कर रहे थे जैसे रेल 4+ में, हमें केवल फोंट को app/assets/fontsडायरेक्टरी के तहत रखने की अनुमति है । लेकिन मेरे रेल 3 ऐप में एक अलग फ़ॉन्ट संगठन था। इसलिए मुझे ऐप को कॉन्फ़िगर करना पड़ा ताकि यह अभी भी रेल्स 4+ के साथ काम करे app/assets/fonts। मैंने कई समाधानों की कोशिश की है लेकिन जब मैंने गैर-बेवकूफ-डाइजेस्ट-एसेट्स रत्न पाया, तो यह इतना आसान हो गया।

अपने रत्न में निम्नलिखित पंक्ति जोड़कर इस रत्न को जोड़ें:

gem 'non-stupid-digest-assets'

फिर भागो:

bundle install

और अंत में अपने config / initializers / non_digest_assets.rb फ़ाइल में निम्न पंक्ति जोड़ें :

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

बस। इससे मेरी समस्या हल हो गई। आशा है कि यह मेरे जैसी समस्या का सामना करने वाले किसी व्यक्ति की मदद करेगा।

Answer 9

यहाँ रेपो 5.2 के साथ एक कस्टम फॉन्ट परोसने वाले एक रेपो को दिखाया गया है जो हरकू पर काम करता है। यह आगे बढ़ता है और https://www.webpagetest.org/ के अनुसार जितनी जल्दी हो सके फोंट की सेवा करने का अनुकूलन करता है

https://github.com/nzoschke/edgecors

शुरू करने के लिए मैंने उपरोक्त उत्तरों से टुकड़े उठाए। रेल के लिए 5.2+ आपको अतिरिक्त परिसंपत्ति पाइपलाइन विन्यास की आवश्यकता नहीं होनी चाहिए।

एसेट पाइपलाइन और एससीएसएस

• फोंट में रखें app/assets/fonts
• @font-faceघोषणा को एक scss फ़ाइल में रखें और font-urlसहायक का उपयोग करें

से 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;
}

सीडीएन से कोर के साथ परोसें

मैं CloudFront का उपयोग कर रहा हूं, Heroku Edge के ऐडऑन के साथ जोड़ा गया है ।

पहले एक CDN उपसर्ग और डिफ़ॉल्ट Cache-Controlशीर्ष लेख कॉन्फ़िगर करें 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

यदि आप सीडीएन URL पर herokuapp.com URL से फ़ॉन्ट तक पहुंचने का प्रयास करते हैं, तो आपको अपने ब्राउज़र में एक CORS त्रुटि मिलेगी:

फॉन्ट की पहुंच ' https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf ' पर मूल ' https://edgecors.herokuapp.com ' को CORS नीति से अवरोधित कर दिया गया है: 'एक्सेस-कंट्रोल-अनुमति' नहीं। -ऑर्गिन हेडर अनुरोधित संसाधन पर मौजूद है। edgecors.herokuapp.com/ प्राप्त https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf net :: ERR_FAILED

इसलिए कॉर्क को हरोकू से सीडीएन URL तक फ़ॉन्ट तक पहुंच की अनुमति देने के लिए कॉन्फ़िगर करें:

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

Gzip फ़ॉन्ट एसेट परोसें

परिसंपत्ति पाइपलाइन एक .ttf.gzफ़ाइल बनाता है, लेकिन यह सेवा नहीं करता है। यह बंदर पैच परिसंपत्ति पाइपलाइन gzip श्वेतसूची को एक ब्लैकलिस्ट में बदलता है:

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

अंतिम परिणाम एक कस्टम फ़ॉन्ट फ़ाइल है app/assets/fontsजिसे लंबे समय तक क्लाउडफ़ॉर्म कैश से परोसा जाता है।

Answer 10

मेरे मामले में मूल प्रश्न asset-urlसादे urlसीएसएस संपत्ति के बजाय परिणाम के बिना उपयोग कर रहा था । asset-urlहेरोकू में मेरे लिए काम करना समाप्त करना । प्लस /assets/fontsफोल्डर को फोल्डर में सेट करना और asset-url('font.eot')बिना किसी सबफ़ोल्डर या किसी अन्य कॉन्फ़िगरेशन को जोड़े बिना कॉल करना।

Answer 11

यदि आपके पास scaffolds.css.scss नामक एक फ़ाइल है, तो एक मौका है कि आप उन सभी कस्टम चीजों को ओवरराइड कर रहे हैं जो आप अन्य फ़ाइलों में कर रहे हैं। मैंने उस फ़ाइल पर टिप्पणी की और अचानक सब कुछ काम कर गया। यदि उस फ़ाइल में कुछ भी महत्वपूर्ण नहीं है, तो आप इसे हटा सकते हैं!

Answer 12

बस अपने फोंट को ऐप / एसेट्स / फोंट फ़ोल्डर के अंदर रखें और एप्लिकेशन में कोड लिखने का उपयोग करते हुए ऐप शुरू करने पर ऑटोलॉड पथ सेट करें।

config.assets.paths << Rails.root.join ("ऐप", "संपत्ति", "फ़ॉन्ट") और फ़ॉन्ट

फिर सीएसएस में निम्नलिखित कोड का उपयोग करें।

@फॉन्ट फ़ेस {

 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;

}

कोशिश करो।

धन्यवाद

Comments

यह मौजूदा उत्तरों पर कुछ भी कैसे जोड़ता है?

— cimmanon