রেল সম্পদ পাইপলাইন সহ ফন্টগুলি ব্যবহার করা

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" শুরু করুন +0100 পরিবেশিত সম্পদ / আইকোমুন.টিএফ - 404 পাওয়া যায় নি (13 মিমি)

কেন সম্পদ পাইপলাইন হস্তক্ষেপ / সম্পত্তিতে ফন্ট ফাইলগুলি সমতল করছে না?

কোন ধারণা মানুষ?

বিনীত, নীল

অতিরিক্ত তথ্য:

সম্পত্তির পাথ এবং সম্পদ সংস্থার জন্য রেল কনসোলটি পরীক্ষা করার সময় আমি নিম্নলিখিতটি পাই:

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পাগল মধ্যে SCSS মধ্যে সাহায্যকারী।

— হাউলেথ

দুর্ভাগ্যক্রমে এটি কোনও পার্থক্য করে না। সুতরাং আমার প্রশ্ন এখনও দাঁড়িয়ে আছে

— rctneil

আমি স্ট্যাকওভারফ্লো . com/ a/ 40898227/1197775 এ এই সমস্যাটি সনাক্ত এবং সমাধান করার জন্য একটি সাধারণ উপায় লিখেছি wrote

— সাইটগুলি

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

   নিশ্চিত করুন যে আপনার হরফটি ঘোষণার ইউআরএল অংশের মতো ঠিক একই রকম হয়েছে। মূল অক্ষর এবং বিরামচিহ্ন চিহ্নগুলি গুরুত্বপূর্ণ। এই ক্ষেত্রে, ফন্টটির নাম থাকা উচিত icomoon।

3. আপনি যদি এসএল বা লেল উইথ রেলগুলি ব্যবহার করেন > 3.1.0(আপনার সিএসএস ফাইলটি .scssবা .lessএক্সটেনশান রয়েছে), তবে url(...)ফন্ট ঘোষণার মধ্যে এটি পরিবর্তন করুন font-url(...)।

   অন্যথায়, আপনার সিএসএস ফাইলের এক্সটেনশন হওয়া উচিত .css.erb, এবং হরফ ডিক্লেয়ারেশন হওয়া উচিত url('<%= asset_path(...) %>')।

   আপনি যদি রেলগুলি ব্যবহার করেন তবে আপনি এর পরিবর্তে > 3.2.1ব্যবহার করতে পারেন । এই সহায়ক ঠিক একই কাজ করে তবে এটি আরও স্পষ্ট।font_path(...)asset_path(...)

4. শেষ পর্যন্ত, আপনার ফন্টটি আপনার সিএসএসে ব্যবহার করুন যেমন আপনি font-familyঅংশে ঘোষণা করেছিলেন । যদি এটি মূলধন হিসাবে ঘোষণা করা হয় তবে আপনি এটি ব্যবহার করতে পারেন:

   font-family: 'Icomoon';

Comments

আপনি কি আপনার সার্ভারটি পুনরায় চালু করেছেন?

— আশিতাকা

@ নাদিম ইয়াসিন আপনার মন্তব্যের জন্য ধন্যবাদ, আমারও একই সমস্যা ছিল। ফাইলের নামগুলিতে হাইপেনস ছিল এবং যখন আমি সরিয়েছি যে এখানে প্রস্তাবিত সমাধানগুলি কাজ করে।

— tsega

config.assets.precompile += %w( .svg .eot .woff .ttf )আসলে ভুল, আপনার সম্পত্তির পুরো নামের সাথে মেলে এমন কিছু প্রাক্পম্পাইল করতে হবে। একটি রিজেক্স আমার জন্য কাজ করেছে:config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

— সানি

ঠিক আছে, এখন এটি আমার জন্য কাজ করে। সুতরাং হয় কোডের সেই লাইনটি একেবারেই প্রয়োজন হয় না বা এই কনফিগারটি সেট করার উপায়টি রেল সংস্করণ (বা অন্য কোনও কিছু) এর উপর নির্ভর করে। @ জিম ইতিমধ্যে জানিয়েছিল যে তাকে দ্বিতীয় ধাপে কনফিগারগুলি সরিয়ে ফেলতে হবে তাই সম্ভবত আমরা এখানে কিছু মিস করছি। ম্যান, সম্পদ পাইপলাইন সহ ফন্টগুলি ব্যবহার করা সহজ হওয়া উচিত।

— আশিতাকা

পদক্ষেপ 2 সরানো উচিত। রেল গাইড অনুসারে , config.assets.pathsস্প্রোকেটস রেফারেন্সের জন্য, এখানে প্রাসঙ্গিক নয়। config.assets.precompileএছাড়াও বেহুদা হয়, কারণ "ফাইল কম্পাইল জন্য ডিফল্ট মিলকারীর application.js, application.css এবং অন্তর্ভুক্ত সমস্ত অ-জাতীয় / সিএসএস ফাইল অ্যাপ্লিকেশন / সম্পদ ফোল্ডারগুলি থেকে (এই স্বয়ংক্রিয়ভাবে সব ইমেজ সম্পদ অন্তর্ভুক্ত করা হবে)" (দেখুন এখানে )

— এরিক এল

Answer 2

এখন এখানে একটি মোড়:

স্থানে উচিত সব ফন্ট app/assets/fonts/হিসাবে তারা হবে যখন পর্যন্ত পিছিয়ে দেয় দ্বারা উপস্থাপনকারী এবং উৎপাদন precompiled পেতে ডিফল্ট-তারা precompiled হবে heroku ।

ফন্ট ফাইল স্থাপন করা vendor/assetsহবে নাডিফল্টরূপে স্টেজিং বা উত্পাদনের ক্ষেত্রে পূর্বনির্ধারিত - তারা হিরকুতে ব্যর্থ হবে । সূত্র!

- @ প্লাপিয়ার, চিন্তাধারার / বোর্বান

আমি দৃ strongly়ভাবে বিশ্বাস করি যে ভেন্ডর ফন্টগুলিতে োকানো 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 এজগুইডস.উরবিওনরইলস.অর্গ / অ্যাসেট পাইপলাইনের লেআউট ব্যাখ্যা করে এবং কীভাবে এটি কাজ করে তা বুঝতে সহায়তা করে। 2014-07-04 হিসাবে সংশোধন করুন

— জাচারি মোশানস্কি

আপনার এই দুটোই দরকার? app.config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts') app.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/অন্য উত্তরের একটি মন্তব্য বলছে যে দ্বিতীয়টি উভয়ের যত্ন নেয়।

— আহ্নবিজক্যাড

এমনকি ails.২ + -ল্যান্ডে, আমি সত্যই মনে করি যে app/assetsস্প্রোককেট এবং বন্ধুরা ইনপুট আউটপুট হিসাবে প্রক্রিয়াকৃত হয় public/assets, যেখানে vendor/assetsএখনও সংশোধন ছাড়াই সম্পদ স্থাপনে কার্যকর হতে পারে; উভয়ের ব্যবহারের ক্ষেত্রে রয়েছে। বিক্রেতার পুরো কনভেনশনটি গ্যারান্টি ভিত্তিতে তৈরি হয়েছিল যে কিছুই হবে না vendor/*। (হ্যাঁ, vendor/pluginsকোড-হোর্ডিং, ক্লোজ-সোর্স ম্যানিয়া পূর্বের রত্ন যুগের সাথে আপত্তিজনকভাবে ব্যবহার করা হয়েছিল এবং লোকেরা কেবল রূপান্তরিত জেএসকে vendor/assets/javascriptsপ্রাক- বোর / রেল-সম্পত্তিতে

যারা ভাবছেন তাদের জন্য; এটি নিক্ষেপ করুনconfig/initializers/assets.rb

— টিজে বিডল

Answer 3

আপনি যদি আপনার ফন্টগুলি চারদিকে সরানোর বিষয়ে নজর রাখতে না চান:

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

Comments

আমি মনে করি এটিই সেরা সমাধান; যদি না আপনি ফন্টগুলি লেখেন তবে সেগুলি সম্ভবত / বিক্রেতা / সম্পদ / ফন্টের অন্তর্ভুক্ত - অ্যাপ্লিকেশন / সম্পদ / ফন্ট নয় not এই পদ্ধতির উভয়ের জন্যই সমাধান করে,

— কেসি

@ ক্যাসি: এই সমাধানটি আপনাকে বিক্রেতা / সম্পত্তির ভিতরে ফন্টগুলি রাখতে দেয় put @ নাথান কলগেট: এটিকে সহজ করা যেতে পারে:config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

— সানি

@ সানি - আমি জানি, সে কারণেই আমি মনে করি এটি গৃহীত উত্তরের চেয়ে ভাল

— কেসি

এছাড়াও আপনার ge Z - stackoverflow.com/questions/577653/…

— কেসি

রেলগুলি ফন্ট ফাইলে সংযুক্ত হ্যাশগুলি কীভাবে মোকাবেলা করবেন?

— জেমস ম্যাকমাহন

Answer 4

font-urlআপনার আপনার @ ফন্ট-ফেস ব্লক ব্যবহার করা দরকার , নাurl

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

পাশাপাশি অ্যাপ্লিকেশন.আরবিতে এই লাইনটি যেমনটি আপনি উল্লেখ করেছেন (ফন্টগুলির জন্য) app/assets/fonts

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

Comments

আপনাকে উত্পাদনের জন্য

— পূর্বরূপ

একেবারে নতুন রেল ৪.২ অ্যাপে, ফাইল থাকা অবস্থায় src: url(someFont.ttf)এবং উভয়ই src: font-url(someFont.ttf)কাজ করেছে app/assets/fonts। আমার .scssডিফল্টরূপে এক্সটেনশন রয়েছে। আমার কনফিগারেশন.সেটস.প্যাথগুলি যুক্ত করার দরকার নেই।

— ড্যানি

Answer 5

সম্পদ পাইপলাইনে ফন্টগুলি ব্যবহার করার জন্য আমার এই পদ্ধতিটি:

1) আপনার সমস্ত ফন্ট ফাইলটি নীচে রাখুন app/assets/fonts/, আসলে আপনি এটিকে fontsফোল্ডারের নামে রাখা সীমাবদ্ধ নয় । আপনার পছন্দ মতো যে কোনও সাবফোল্ডার নাম রাখতে পারেন। যেমন app/assets/abcবা app/assets/anotherfonts। তবে আমি আপনাকে এটির app/assets/fonts/আরও ভাল ফোল্ডারের কাঠামোর জন্য রাখার পরামর্শ দিচ্ছি।

2) আপনার sass ফাইল থেকে, সাস হেল্পারটি ব্যবহার করে font-pathআপনার ফন্টের সম্পদের অনুরোধ করতে অনুরোধ করুন

@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আপনার স্থানীয় মেশিন থেকে চালান এবং আপনার প্রয়োগ। CSS ফলাফল দেখুন। আপনার এমন কিছু দেখা উচিত:

@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-piplines-simple-guide-830e2e666f6c#.6lejlayk2

Answer 6

আমি 4.2 রেল (রুবি ২.২.৩ সহ) এ সমস্যা হচ্ছিলাম $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');

এটা কাজ করেছে. আমি মনে করি রেলস ৪.২ ইতিমধ্যে ফন্ট ডিরেক্টরিটি ধরে নিয়েছে, সুতরাং এটি আবার CSS কোডে উল্লেখ করা ফন্ট ফাইলগুলি সন্ধান না করে। আশাকরি এটা সাহায্য করবে.

Answer 8

আমি সম্প্রতি আমার রেলস 3 অ্যাপ্লিকেশনটিকে রেল 4-তে আপগ্রেড করার সময় আমার একই রকম সমস্যা হয়েছিল। আমার ফন্টগুলি রেল 4+ এর মতো ঠিকমতো কাজ করছে না, আমাদের কেবল ফন্টগুলি app/assets/fontsডিরেক্টরিতে রাখার অনুমতি রয়েছে । তবে আমার রেলস 3 অ্যাপের একটি আলাদা ফন্ট সংগঠন ছিল। সুতরাং আমাকে অ্যাপটি কনফিগার করতে হয়েছিল যাতে এটি এখনও রেল 4+ এর সাথে আমার ফন্টগুলি বাদে অন্য কোনও জায়গায় রেখে কাজ করে app/assets/fonts। আমি বেশ কয়েকটি সমাধানের চেষ্টা করেছি তবে আমি নির্বোধ-ডাইজেস্ট-সম্পদ পাওয়ার পরে রত্ন এটি এটিকে এত সহজ করে তুলেছি।

এই রত্নটি আপনার রত্নমঞ্চলে নিম্নলিখিত লাইন যুক্ত করে যুক্ত করুন:

gem 'non-stupid-digest-assets'

তারপরে চালান:

bundle install

এবং অবশেষে আপনার কনফিগারেশন / আরম্ভকারী / নন_ডিজাস্ট_অ্যাসেটস.আরবি ফাইলটিতে নিম্নলিখিত লাইনটি যুক্ত করুন:

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

এটাই. এটি আমার সমস্যাটি সুন্দরভাবে সমাধান করেছে। আশা করি এটি আমার মতো একই সমস্যার সম্মুখীন হয়ে এমন কাউকে সহায়তা করবে helps

Answer 9

এখানে একটি রেপো হেরোকুতে কাজ করে রেল 5.2 এর সাথে একটি কাস্টম ফন্ট পরিবেশন করে। এটি আরও এগিয়ে যায় এবং https://www.webpagetest.org/ অনুসারে ফন্টগুলি যত তাড়াতাড়ি দ্রুত পরিবেশন করতে অপ্টিমাইজ করে

https://github.com/nzoschke/edgecors

শুরু করতে আমি উপরের উত্তরগুলি থেকে টুকরো টুকরো করেছি। রেল 5.2+ এর জন্য আপনার অতিরিক্ত সম্পদ পাইপলাইন কনফিগার করা উচিত নয়।

সম্পদ পাইপলাইন এবং এসসিএসএস

• ফন্টগুলি এতে রাখুন app/assets/fonts
• @font-faceঘোষণাটি একটি স্ক্যাস ফাইলের মধ্যে রাখুন এবং 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;
}

সিডিএন থেকে সিওআরএস দিয়ে পরিবেশন করুন

আমি ক্লাউডফ্রন্ট ব্যবহার করছি, হেরোকু এজ অ্যাডনের সাথে যুক্ত ।

প্রথমে এতে একটি সিডিএন উপসর্গ এবং ডিফল্ট 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

আপনি হিরকুঅ্যাপ ডটকম ইউআরএল থেকে সিডিএন ইউআরএলে ফন্টটি অ্যাক্সেস করার চেষ্টা করলে আপনি আপনার ব্রাউজারে একটি সিওআরএস ত্রুটি পাবেন:

'এ ফন্ট ব্যবহার https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf মূল থেকে' ' https://edgecors.herokuapp.com ' CORS নীতি দ্বারা অবরোধ করা হয়েছে: না 'অ্যাকসেস-নিয়ন্ত্রণ-মঞ্জুর করুন -আরগিনের শিরোনাম অনুরোধ করা সংস্থানটিতে উপস্থিত রয়েছে। এজেনারস.হেরোকুয়াপস // জিইটি https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata- রেগুলার.টিএফ নেট :: ERR_FAILED

সুতরাং হেরোকু থেকে সিডিএন ইউআরএলে ফন্টের অ্যাক্সেসের অনুমতি দেওয়ার জন্য সিওআরএস কনফিগার করুন:

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

জিজিপ ফন্ট সম্পদ পরিবেশন করুন

সম্পদ পাইপলাইন একটি .ttf.gzফাইল তৈরি করে তবে তা পরিবেশন করে না। এই বানরের প্যাচ সম্পত্তির পাইপলাইন জিপ জিপ হোয়াইটলিস্টকে একটি কালো তালিকাতে পরিবর্তন করেছে:

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দীর্ঘকালীন ক্লাউডফ্রন্ট ক্যাশে থেকে পরিবেশন করা একটি কাস্টম ফন্ট ফাইল font

Answer 10

আমার ক্ষেত্রে মূল প্রশ্নটি asset-urlসরল urlCSS সম্পত্তির পরিবর্তে ফলাফল ছাড়াই ব্যবহার করা হয়েছিল । ব্যবহার করা asset-urlHeroku আমার জন্য কাজ শেষ পর্যন্ত। /assets/fontsফোল্ডারে ফন্টগুলি সেট করা এবং asset-url('font.eot')এতে কোনও সাবফোল্ডার বা অন্য কোনও কনফিগারেশন যোগ না করে কল করা।

Answer 11

আপনার কাছে যদি স্ক্যাফোল্ডস সিএসএসএসএসএস নামে একটি ফাইল থাকে তবে অন্য সুযোগগুলিতে আপনি যে সমস্ত কাস্টম কাজ করছেন সেগুলি ওভাররাইড করার একটি সুযোগ রয়েছে। আমি ফাইলটি মন্তব্য করেছিলাম এবং হঠাৎ সবকিছু কাজ করে। যদি সেই ফাইলটিতে গুরুত্বপূর্ণ কিছু না থাকে তবে আপনি সম্ভবত এটি মুছুন!

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

এটি কীভাবে বিদ্যমান উত্তরের সাথে কিছু যুক্ত করে?

— সিমনম্যান