Rails varlık kanalıyla yazı tiplerini kullanma

Scss dosyamda şu şekilde yapılandırılan bazı yazı tipleri var:

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

Gerçek yazı tipi dosyası / app / asset / fonts /

config.assets.paths << Rails.root.join("app", "assets", "fonts")Application.rb dosyama ekledim

ve derleme CSS kaynağı aşağıdaki gibidir:

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

Ancak uygulamayı çalıştırdığımda yazı tipi dosyaları bulunamıyor. Günlükler:

127.0.0.1 için 2012-06-05 23:21:17 +0100 Hizmet sunulan /icoMoon.ttf - 404 Bulunamadı (13 ms)

Varlık boru hattı neden yazı tipi dosyalarını sadece / varlıklara düzleştirmiyor?

Herhangi bir fikir var mı?

Saygılarımla, Neil

Fazladan bilgi:

Raylar konsolunu varlık yolları ve assetprecompile için kontrol ederken aşağıdakileri alıyorum:

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. Senin Raylar versiyonu arasında ise > 3.1.0ve < 4bu klasörlerin herhangi birinde fontları yerleştirin:

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

   
   

   Raylar sürümleri için > 4, sen gerekir daki fontları yerleştirmek app/assets/fontsklasörünün.

   Not: Yazı tiplerini belirtilen klasörlerin dışına yerleştirmek için aşağıdaki yapılandırmayı kullanın:

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

   Rails sürümleri için > 4.2, bu yapılandırmanın eklenmesi önerilirconfig/initializers/assets.rb .

   Ancak, aynı zamanda her iki ekleyebilirsiniz config/application.rb, veyaconfig/production.rb

2. Yazı tipinizi CSS dosyanızda bildirin:

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

   Yazı tipinizin, bildirimin URL bölümündeki adıyla aynı olduğundan emin olun. Büyük harfler ve noktalama işaretleri önemlidir. Bu durumda, yazı tipinin adı olmalıdır icomoon.

3. Sass veya Less with Rails kullanıyorsanız > 3.1.0(CSS dosyanız var .scssveya .lessuzantı var), url(...)yazı tipi bildirimindeki olarak değiştirin font-url(...).

   Aksi takdirde, CSS dosyanızın uzantısına sahip olması .css.erbve yazı tipi bildiriminin olması gerekir url('<%= asset_path(...) %>').

   Rails kullanıyorsanız > 3.2.1, font_path(...)yerine kullanabilirsiniz asset_path(...). Bu yardımcı aynı şeyi yapıyor ama daha açık.

4. Son olarak, yazı tipinizi CSS'nizde font-familyparçası olarak kullandığınız gibi kullanın . Büyük harf olarak beyan edilmişse, bunu şu şekilde kullanabilirsiniz:

   font-family: 'Icomoon';

Şimdi bir bükülme:

Sen tüm yazı tiplerini yerleştirmelidir app/assets/fonts/onlar OLACAK zorlandığında tarafından evreleme ve üretimde precompiled olsun varsayılan-onlar precompiled alacak Heroku .

Yazı yerleştirilir dosyaları vendor/assetsolacak DEĞİL varsayılan olarak evreleme veya üretime precompiled - onlar başarısız olur Heroku . Kaynak!

- @plapier, düşünce botu / burbon

Satıcı yazı tiplerini vendor/assets/fonts yerleştirmenin, onları yerleştirmekten çok daha mantıklı olduğuna inanıyorum app/assets/fonts. Bu 2 ekstra konfigürasyon çizgisi ile bu benim için iyi çalıştı (Rails 4'te):

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

- @jhilden, düşünce botu / burbon

Ben de test ettim rails 4.0.0. Aslında son bir satır, fontları vendorklasörden güvenli bir şekilde önceden derlemek için yeterlidir . Anlamak için birkaç saat sürdü. Umarım birine yardımcı olmuştur.

Yazı tiplerinizi hareket ettirmek istemiyorsanız:

# 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 bloğunuzda kullanmanız gerekir ,url

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

ve belirttiğiniz gibi application.rb dosyasındaki bu satırı ( app/assets/fonts

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

İşte varlık boru hattında yazı tiplerini kullanma yaklaşımım:

1) Tüm yazı tipi dosyanızı altına koyun app/assets/fonts/, aslında fontsklasör adı altına koymakla sınırlı değilsiniz . İstediğiniz alt klasör adını koyabilirsiniz. Örneğin app/assets/abcveya app/assets/anotherfonts. Ama app/assets/fonts/daha iyi klasör yapısı için altına koymanızı tavsiye ederim .

2) sass dosyanızdan, font-pathbu gibi font varlıklarınızı istemek için sass yardımcısını kullanma

@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:precompileYerel makinenizden çalıştırın ve application.css sonucunu görün. Bunun gibi bir şey görmelisin:

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

Varlık boru hattının nasıl çalıştığını öğrenmek istiyorsanız, aşağıdaki basit kılavuzu ziyaret edebilirsiniz: https://designcode.commandrun.com/rails-asset-pipeline-simple-guide-830e2e666f6c#.6lejlayk2

Rails 4.2 (ruby 2.2.3 ile) bu sorunu yaşıyordu $fa-font-pathve referansları kaldırmak ve önde gelen eğik çizgi kaldırmak için font-awesome _paths.scss kısmi düzenlemek zorunda kaldı . Aşağıdakiler kırıldı:

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

Ve aşağıdaki işler:

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

Bir alternatif, enterpolasyonu takiben eğik çizgiyi kaldırmak $fa-font-pathve daha sonra eğik çizgi (gerekirse) ile $fa-font-pathboş bir dize veya alt dizin olarak tanımlamaktır .

Varlıkları yeniden derlemeyi ve sunucunuzu gerektiği gibi yeniden başlatmayı unutmayın. Örneğin, bir yolcu kurulumunda:

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

Ardından tarayıcınızı yeniden yükleyin.

Rails 4.2 kullanıyorum ve görünmek için footable simgeleri alınamadı. Daraltılmış satırlardaki (+) yerine ve beklediğim küçük sıralama okları yerine küçük kutular gösteriliyordu. Buradaki bilgileri inceledikten sonra, kodumda basit bir değişiklik yaptım: css'deki font dizinini kaldırın. Yani, tüm css girişlerini şu şekilde değiştirin:

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

şöyle görünmek için:

src:url('footable.eot');

İşe yaradı. Rails 4.2 yazı tipi dizini zaten varsayalım, bu yüzden css kodunda tekrar belirtilmesi yazı tipi dosyaları bulunamıyor yapar. Bu yardımcı olur umarım.

Geçenlerde Rails 3 uygulamamı Rails 4'e yükselttiğimde de benzer bir sorun yaşadım. Yazı tiplerim Rails 4+ 'da olduğu gibi düzgün çalışmıyor, yalnızca yazı tiplerini app/assets/fontsdizin altında tutmamıza izin verildi . Ancak Rails 3 uygulamamın farklı bir yazı tipi organizasyonu vardı. Bu yüzden, yazı tiplerimi başka bir yerde olan Rails 4+ ile çalışacak şekilde yapılandırmak zorunda kaldım app/assets/fonts. Birkaç çözüm denedim ama aptal olmayan öz-varlıklar bulduktan sonra mücevher , sadece bu kadar kolay yaptı.

Gemfile'ınıza aşağıdaki satırı ekleyerek bu gem'i ekleyin:

gem 'non-stupid-digest-assets'

O zaman koş:

bundle install

Ve son olarak config / initializers / non_digest_assets.rb dosyanıza aşağıdaki satırı ekleyin :

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

Bu kadar. Bu sorunumu güzelce çözdü. Umarım bu benim gibi benzer sorunlarla karşılaşmış birine yardımcı olur.

İşte Heroku üzerinde çalışan Rails 5.2 ile özel bir yazı tipi sunan gösteriler. Daha da ileri gider ve yazı tiplerinin sunumunu https://www.webpagetest.org/ adresine göre olabildiğince hızlı olacak şekilde optimize eder.

https://github.com/nzoschke/edgecors

Başlamak için yukarıdaki cevaplardan parçalar aldım. Rails 5.2+ için ekstra varlık boru hattı yapılandırmasına ihtiyacınız olmamalıdır.

Varlık Boru Hattı ve SCSS

• Yazı tiplerini yerleştirin app/assets/fonts
• Yerleştirin @font-facebir SCSS dosyasında beyanı ve kullanımı font-urlyardımcısı

Gönderen 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'den CORS ile servis yapın

Heroku Edge eklentisi ile eklenen CloudFront kullanıyorum .

İlk önce bir CDN öneki ve varsayılan Cache-Controlbaşlıkları yapılandırın 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

Yazı tipine herokuapp.com URL'sinden CDN URL'sine erişmeye çalışırsanız, tarayıcınızda bir CORS hatası alırsınız:

'De yazı erişim https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf kökenli' ' https://edgecors.herokuapp.com ' CORS politikası tarafından bloke edilmiştir: Hayır 'Erişim-Control-Allow -Origin 'başlığı istenen kaynakta mevcut. edgecors.herokuapp.com/ GET https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf net :: ERR_FAILED

Bu yüzden CORS'u Heroku'dan CDN URL'sine yazı tipine erişime izin verecek şekilde yapılandırın:

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 Yazı Tipi Öğesi sun

Varlık boru hattı bir .ttf.gzdosya oluşturur, ancak sunmaz. Bu maymun yaması, varlık boru hattı gzip beyaz listesini bir kara listeye değiştirir:

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

Nihai sonuç, app/assets/fontsuzun ömürlü bir CloudFront önbelleğinden sunulan özel bir yazı tipi dosyasıdır .

Benim durumumda orijinal soru asset-urldüz urlcss özelliği yerine sonuçsuz kullanıyordu . Kullanarak asset-urlHeroku benim için çalıştı. Ayrıca /assets/fontsklasördeki yazı tiplerini ayarlama ve asset-url('font.eot')alt klasör veya başka bir yapılandırma eklemeden arama .

Scaffolds.css.scss adlı bir dosyanız varsa, diğer dosyalarda yaptığınız tüm özel şeyleri geçersiz kılma şansı vardır. Bu dosyayı yorumladım ve aniden her şey işe yaradı. Bu dosyada önemli bir şey yoksa, silebilirsiniz!

yazı tiplerinizi app / asset / fonts klasörüne yerleştirin ve uygulama application.rb kodunu yazmaya başladığında otomatik yükleme yolunu ayarlayın.

config.assets.paths << Rails.root.join ("uygulama", "varlıklar", "yazı tipleri") ve

sonra css'de aşağıdaki kodu kullanın.

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

}

Bir şans ver.

Teşekkürler