ruby on rails - Rails সম্পদ পাইপলাইন সঙ্গে ফন্ট ব্যবহার করে




ruby-on-rails sass (8)

  1. যদি আপনার রেলের সংস্করণ > 3.1.0 এবং < 4 মধ্যে থাকে তবে আপনার ফন্টগুলি এই যে কোনও ফোল্ডারে রাখুন:

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


    Rails সংস্করণগুলির জন্য > 4 , আপনাকে অবশ্যই আপনার ফন্টগুলি app/assets/fonts ফোল্ডারে রাখতে হবে।

    দ্রষ্টব্য: এই নির্দিষ্ট ফোল্ডারগুলির বাইরে ফন্টগুলি স্থাপন করতে নিম্নলিখিত কনফিগারেশনটি ব্যবহার করুন:

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

    Rails সংস্করণের জন্য > 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. যদি আপনি সাস বা কম সাথে Rails > 3.1.0 (আপনার সিএসএস ফাইলটি .scss বা .less এক্সটেনশান), তবে .less url(...) এ ফন্ট ঘোষণাতে font-url(...)

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

    যদি আপনি Rails > 3.2.1 ব্যবহার করেন, তবে আপনি font_path(...) পরিবর্তে font_path(...) ব্যবহার করতে পারেন। এই সাহায্যকারী ঠিক একই জিনিস কিন্তু এটি আরো স্পষ্ট।

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

    font-family: 'Icomoon';

আমি আমার এসএসএসএস ফাইলে কনফিগার করা কিছু ফন্ট আছে যেমন:

@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") যোগ করেছেন config.assets.paths << Rails.root.join("app", "assets", "fonts") আমার application.rb ফাইলে

এবং কম্পাইল CSS উৎস নিম্নরূপ:

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

কিন্তু যখন আমি অ্যাপ রান করি ফন্ট ফাইল পাওয়া যায় না। লগগুলি:

127.0.0.1 এর জন্য "/assets/icoMoon.ttf" শুরু করুন 2012-06-05 23:21:17 +0100 পরিসেবা সম্পন্ন /icoMoon.ttf - 404 পাওয়া যায় নি (13 মিমি)

সম্পত্তি পাইপলাইন কেন ফন্ট ফাইলগুলিকে কেবলমাত্র / সম্পত্তিতে ফ্ল্যাট করে না?

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

শুভেচ্ছা, নীল

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

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

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-[email protected]/gems/jquery-rails-2.0.0/vendor/assets/javascripts
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-[email protected]/gems/coffee-rails-3.2.1/lib/assets/javascripts
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-[email protected]/gems/bourbon-1.3.0/app/assets/stylesheets
- !ruby/object:Pathname
  path: /Users/neiltonge/code/neiltonge/app/assets/fonts
 => nil

অ্যাপ্লিকেশন / সম্পত্তির / ফন্টের ফোল্ডারের ভিতরে আপনার ফন্টগুলি স্থাপন করুন এবং অ্যাপ্লিকেশনটি অ্যাপ্লিকেশন.আরবিতে কোডটি লেখার মাধ্যমে অ্যাপ্লিকেশনটি শুরু করার সময় স্বয়ংক্রিয় লোড পাথ সেট করুন

config.assets.paths << Rails.root.join ("অ্যাপ্লিকেশন", "সম্পদ", "ফন্ট") এবং

তারপর css নিম্নলিখিত কোড ব্যবহার করুন।

@ফন্ট অভিহিত {

 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;

}

একবার চেষ্টা করে দেখো.

ধন্যবাদ


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

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

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


আমি Rails 4.2 ব্যবহার করছি, এবং প্রদর্শনযোগ্য ফুটবল আইকন পেতে পারে না। ছোট বাক্সগুলি দেখানো হয়েছিল, পরিবর্তে (+) ভেঙ্গে যাওয়া সারি এবং আমি প্রত্যাশিত সামান্য বাছাই তীর। এখানে তথ্য অধ্যয়ন করার পরে, আমি আমার কোডে একটি সহজ পরিবর্তন করেছি: CSS এ ফন্ট ডিরেক্টরিটি সরান। যে, এই মত সব CSS এন্ট্রি পরিবর্তন করুন:

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

এই মত চেহারা:

src:url('footable.eot');

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


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

আপনার Gemfile নিম্নলিখিত লাইন যোগ করে এই মণি যোগ করুন:

gem 'non-stupid-digest-assets'

তারপর চালান:

bundle install

এবং অবশেষে আপনার কনফিগারেশন / initializers / non_digest_assets.rb ফাইলে নিম্নলিখিত লাইন যুক্ত করুন:

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

এটাই. এই চমত্কারভাবে আমার সমস্যা সমাধান। এই আমার মত অনুরূপ সমস্যা সম্মুখীন হয়েছে এমন কেউ সাহায্য করে।


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

https://github.com/nzoschke/edgecors

শুরু করার জন্য আমি উপরে উত্তর থেকে টুকরা বাছাই। Rails জন্য 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;
}

CORS সঙ্গে সিডিএন থেকে পরিবেশন করা

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

প্রথমে output.rb এ একটি সিডিএন প্রিফিক্স এবং ডিফল্ট Cache-Control হেডার কনফিগার করুন:

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

আপনি যদি herokuapp.com URL থেকে সিডিএন URL এ ফন্ট অ্যাক্সেস করার চেষ্টা করেন তবে আপনার ব্রাউজারে একটি CORS ত্রুটি পাবেন:

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

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

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 একটি কাস্টম ফন্ট ফাইল।


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





assets