ใช้ฟอนต์กับไพพ์ไลน์ของ Rails

ฉันได้รับการกำหนดค่าแบบอักษรบางอย่างในไฟล์ Scss ของฉันดังนี้:

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

ไฟล์ตัวอักษรที่แท้จริงจะถูกเก็บไว้ใน / app / สินทรัพย์ / แบบอักษร /

ฉันเพิ่มลง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");
}

แต่เมื่อฉันเรียกใช้แอพจะไม่พบไฟล์แบบอักษร บันทึก:

เริ่มต้นรับ "/assets/icoMoon.ttf" สำหรับ 127.0.0.1 ที่ 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-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

1. หากเวอร์ชั่น Rails ของคุณอยู่ระหว่าง> 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/

   สำหรับรุ่นทางรถไฟ> 4.2ก็จะแนะนำconfig/initializers/assets.rbเพื่อเพิ่มการกำหนดค่านี้ไป

   อย่างไรก็ตามคุณยังสามารถเพิ่มลงในconfig/application.rbหรือconfig/production.rb

2. ประกาศแบบอักษรของคุณในไฟล์ CSS ของคุณ:

   @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. หากคุณกำลังใช้ Sass หรือน้อยกับทางรถไฟ> 3.1.0(CSS ไฟล์ของคุณมี.scssหรือ.lessส่วนขยาย) แล้วเปลี่ยนในการประกาศตัวอักษรเพื่อurl(...)font-url(...)

   มิฉะนั้น CSS ไฟล์ของคุณควรมีการขยายและการประกาศตัวอักษรที่ควรจะเป็น.css.erburl('<%= asset_path(...) %>')

   หากคุณกำลังใช้ Rails > 3.2.1คุณสามารถใช้แทนfont_path(...) asset_path(...)ผู้ช่วยตัวนี้ทำสิ่งเดียวกัน แต่ชัดเจนกว่า

4. สุดท้ายใช้แบบอักษรของคุณใน CSS เหมือนที่คุณประกาศไว้ในfont-familyส่วน หากมีการประกาศเป็นตัวพิมพ์ใหญ่คุณสามารถใช้มันได้เช่นนี้:

   font-family: 'Icomoon';

ตอนนี้ที่นี่เป็นบิด:

คุณควรวางแบบอักษรทั้งหมดในapp/assets/fonts/ขณะที่พวกเขาจะได้รับการ precompiled ในการแสดงละครและการผลิตโดยเริ่มต้นที่พวกเขาจะได้รับการ precompiled เมื่อผลักให้Heroku

ตัวอักษรวางไว้ในไฟล์vendor/assetsจะไม่ได้รับการ precompiled ในการแสดงละครหรือการผลิตโดยเริ่มต้น - พวกเขาจะล้มเหลวในHeroku แหล่งที่มา!

- @ plapier, thinkbot / Bourbon

ฉันเชื่ออย่างยิ่งว่าการใส่แบบอักษรผู้ขายลงไปนั้นvendor/assets/fonts มีเหตุผลมากกว่าการใส่ลงในแบบอักษรเหล่าapp/assets/fontsนั้น ด้วยการกำหนดค่าเพิ่มเติม 2 บรรทัดนี้ทำงานได้ดีสำหรับฉัน (บน Rails 4):

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

- @jhilden, thinkbot / Bourbon

rails 4.0.0ฉันยังทดสอบบน ที่จริงแล้วหนึ่งบรรทัดสุดท้ายนั้นเพียงพอที่จะรวบรวมแบบอักษรจากvendorโฟลเดอร์ได้อย่างปลอดภัย ใช้เวลาสองสามชั่วโมงในการคิดออก หวังว่าจะช่วยใครบางคน

หากคุณไม่ต้องการติดตามการย้ายแบบอักษรของคุณ:

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

คุณต้องใช้font-urlใน @ font-face block ของคุณไม่ใช่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")

นี่คือวิธีการของฉันในการใช้แบบอักษรในไปป์ไลน์:

1) วางไฟล์ฟอนต์ทั้งหมดไว้ใต้app/assets/fonts/จริง ๆ แล้วคุณไม่ได้ถูก จำกัด ให้วางไว้ใต้fontsชื่อโฟลเดอร์ คุณสามารถใส่ชื่อโฟลเดอร์ย่อยที่คุณต้องการ เช่นหรือapp/assets/abc app/assets/anotherfontsแต่ฉันขอแนะนำให้คุณวางไว้ใต้app/assets/fonts/เพื่อให้โครงสร้างโฟลเดอร์ดีขึ้น

2) จากไฟล์ sass ของคุณโดยใช้ sass helper 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จากเครื่องท้องถิ่นของคุณและดูผลลัพธ์ application.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-pipeline-simple-guide-830e2e666f6c#.6lejlayk2

ฉันมีปัญหานี้ใน Rails 4.2 (ด้วย ruby ​​2.2.3) และต้องแก้ไข _paths.scss แบบอักษรที่ยอดเยี่ยมบางส่วนเพื่อลบการอ้างอิงถึง$fa-font-pathและลบเครื่องหมายทับหน้านำ ต่อไปนี้ถูกทำลาย:

@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

จากนั้นโหลดเบราว์เซอร์ของคุณใหม่

ฉันใช้ Rails 4.2 และไม่สามารถแสดงไอคอน footable ให้ปรากฏขึ้นได้ กล่องเล็ก ๆ กำลังแสดงอยู่แทนที่จะเป็น (+) บนแถวที่ยุบและลูกศรเรียงลำดับเล็ก ๆ ที่ฉันคาดไว้ หลังจากศึกษาข้อมูลที่นี่ฉันทำการเปลี่ยนแปลงอย่างง่าย ๆ หนึ่งในรหัสของฉัน: ลบไดเรกทอรีตัวอักษรใน 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 ของฉันมีแบบอักษรต่างกัน ดังนั้นฉันต้องกำหนดค่าแอพเพื่อให้มันยังคงใช้งานได้กับ Rails 4+ ที่มีแบบอักษรของฉันในที่อื่นนอกเหนือจากapp/assets/fontsนี้ ฉันได้ลองวิธีแก้ปัญหาหลายอย่าง แต่หลังจากที่ฉันพบอัญมณีที่ไม่ใช่สินทรัพย์ย่อยโง่มันทำให้มันง่ายมาก

เพิ่มอัญมณีนี้โดยเพิ่มบรรทัดต่อไปนี้ใน Gemfile ของคุณ:

gem 'non-stupid-digest-assets'

จากนั้นเรียกใช้:

bundle install

และในที่สุดก็เพิ่มบรรทัดต่อไปนี้ในไฟล์config / initializers / non_digest_assets.rb ของคุณ :

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

แค่นั้นแหละ. วิธีนี้ช่วยแก้ไขปัญหาของฉันได้อย่างดี หวังว่านี่จะช่วยคนที่ประสบปัญหาคล้ายกันเช่นฉัน

นี่คือ repo ที่สาธิตให้บริการแบบอักษรที่กำหนดเองด้วย Rails 5.2 ที่ใช้งานได้กับ Heroku มันไปไกลกว่าและปรับการให้บริการแบบอักษรให้เร็วที่สุดเท่าที่จะทำได้ตามhttps://www.webpagetest.org/

https://github.com/nzoschke/edgecors

ในการเริ่มต้นฉันเลือกชิ้นจากคำตอบด้านบน สำหรับ Rails 5.2+ คุณไม่จำเป็นต้องมีการตั้งค่าไปป์ไลน์เพิ่มเติม

ท่อส่งทรัพย์สินและ SCSS

• วางแบบอักษรใน 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;
}

เสิร์ฟจาก CDN กับ CORS

ฉันใช้ CloudFront เพิ่มกับaddon Heroku ขอบ

ก่อนกำหนดค่าคำนำหน้า 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 CDN คุณจะได้รับข้อผิดพลาด 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

ดังนั้นกำหนดค่า CORS เพื่ออนุญาตการเข้าถึงแบบอักษรจาก Heroku ไปยัง CDN 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ให้บริการจากแคช CloudFront ที่มีอายุการใช้งานยาวนาน

ในกรณีของฉันคำถามเดิมใช้asset-urlโดยไม่มีผลลัพธ์แทนurlคุณสมบัติ css ธรรมดา การใช้งานasset-urlจบลงด้วยการทำงานให้ฉันใน Heroku รวมถึงการตั้งค่าแบบอักษรใน/assets/fontsโฟลเดอร์และการโทรasset-url('font.eot')โดยไม่ต้องเพิ่มโฟลเดอร์ย่อยหรือการกำหนดค่าอื่น ๆ

หากคุณมีไฟล์ชื่อ scaffolds.css.scss แสดงว่ามีโอกาสที่จะเอาชนะสิ่งที่กำหนดเองทั้งหมดที่คุณทำในไฟล์อื่น ฉันใส่ความคิดเห็นไฟล์นั้นและทุกอย่างก็ทำงาน หากไม่มีสิ่งใดที่สำคัญในไฟล์คุณอาจลบไฟล์นั้นด้วย!

เพียงวางแบบอักษรของคุณลงในโฟลเดอร์ app / assets / fonts และตั้งค่าเส้นทาง autoload เมื่อแอปเริ่มต้นโดยใช้การเขียนรหัสใน application.rb

config.assets.paths << Rails.root.join ("แอพ", "ทรัพย์สิน", "แบบอักษร") และ

จากนั้นใช้รหัสต่อไปนี้ใน css

@ font-face {

 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;

}

ให้มันลอง.

ขอบคุณ