@ font-face tại đường ray 4.0 với url sass không tìm thấy cho phông chữ tùy chỉnh

Question

hi tất cả trong dự án đường ray của tôi đang cố gắng sử dụng phông chữ tùy chỉnh hơn nữa. Có rất nhiều câu trả lời liên quan đến câu hỏi này tôi đã làm theo câu trả lời này không giúp chỉnh sửa tệp development.rb

# Add the fonts path 
config.assets.paths << Rails.root.join('app', 'assets', 'fonts') 

# Precompile additional assets 
config.assets.precompile += %w(.svg .eot .woff .ttf) 

vẫn thấy nó No route matches [GET] "/assets/chalkduster-webfont.woff"

và tôi đặt tôi url như

@font-face { 
    font-family: 'chalkdusterregular'; 
    src: url('chalkduster-webfont.eot'); 
    src:url('chalkduster-webfont.svg#chalkdusterregular') format('svg'), 
    url('chalkduster-webfont.eot?#iefix') format('embedded-opentype'), 
     url('chalkduster-webfont.woff') format('woff'), 
     url('chalkduster-webfont.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 

} 

nhiều hơn cố gắng font_path('') trong nguồn và cũng font-url() nó không bao giờ hoạt động .. :(

Answer 1

Hãy thử asset-url(). Làm việc cho tôi.

@font-face { 
    font-family: 'chalkdusterregular'; 
    src: asset-url('chalkduster-webfont.eot'); 
    src: asset-url('chalkduster-webfont.svg#chalkdusterregular') format('svg'), 
     asset-url('chalkduster-webfont.eot?#iefix') format('embedded-opentype'), 
     asset-url('chalkduster-webfont.woff') format('woff'), 
     asset-url('chalkduster-webfont.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 

Ngoài ra, tôi chỉ thêm đường dẫn phông chữ và tiền biên dịch tài sản bổ sung trong config/môi trường/production.rb

# Add the fonts path 
config.assets.paths << Rails.root.join('app', 'assets', 'fonts') 

# Precompile additional assets 
config.assets.precompile += %w(.svg .eot .woff .ttf) 

Không cần phải được thêm vào config/môi trường/development.rb như asset-url hoạt động một chút phép thuật.

Answer 2

Tôi đã tìm thấy một cách dễ dàng hơn để thực hiện nhập khẩu không bắt buộc và đây là: Bạn có thể chuyển đổi tệp phông chữ của mình trên văn bản cơ bản 64. Đảm bảo bạn kiểm tra mã hóa Base64 lựa chọn

rồi nhấp vào chuyển đổi và tải xuống tệp .zip để tạo trang. Bên trong tệp .zip mở de .css và bạn thấy mã bạn cần.

---

tôi cố gắng thực hiện các giải pháp của các jverban nhưng đối với tôi, không hoạt động.

Sau đó, tôi tìm thấy một tuto, nơi giải thích hai cách todo nó, click for open the tuto

và tôi cố gắng giải pháp thứ hai (Cách của các hacker). và chỉ làm là di chuyển thư mục phông chữ bên trong ứng dụng/tài sản/bảng định kiểu. (I supuose bạn đặt tất cả các bạn phông chữ bên trong một thư mục có tên phông chữ)

sau đó trong file css o SCSS, bạn có thể làm điều đó với mã này.

@font-face { 
    font-family: 'GoodDDC'; 
    src: url(asset_path("fonts/GOODDC.ttf")); 
} 

asset_path tham khảo trên đường ray thư mục app/assets/stylesheets

thư mục cây trông giống như

app/assets/stylesheets/fonts/yourfont.ttf (wof, etc)