Rails應用程序未加載的自定義字體

超級簡單的問題，我期待。我想我的自定義字體上傳到服務器，就像這樣：Rails應用程序未加載的自定義字體

custom.css.scss

p, ol, li, a, td, ul, h1, h2, h3, h4, h5, h6, label { 
    font-family: rockwell; 
    src: url('/assets/Rockwell.TTF'); 
    text-align: left; 
    em { 
    font-family: rockwell; 
    font-style: italic; 
    src: url('/assets/RockwellItalic.TTF'); 
    } 
    strong { 
    font-family: rockwell; 
    font-weight: bold; 
    src: url('/assets/RockwellBold.TTF'); 
    } 
}

我試圖把那三個文件TTF都直接在app /資產（當前嘗試）以及應用/資產/樣式表中。當我做了後者時，我嘗試了src url作爲/stylesheets/Rockwell.ttf和/app/assets/stylesheets/Rockwell.ttf。

這些都沒有實際工作。當我的朋友在他的瀏覽器中加載該網站時，它使用另一種字體。任何想法我做錯了什麼？ /如何解決它？如果這只是CSS3，我如何確保我使用CSS3？

編輯 - 我一直在試圖弄清楚應用程序是否無法找到字體文件，所以我檢查了檢查元素的網絡/字體選項卡。無論我是否提供了一條真正的路徑（我錯誤地嘗試了/stylesheetsRockwell.ttf），根本沒有任何東西顯示出來。

編輯 - 以粗體和斜體包裝的可能方法？

@font-face { 
    font-family: 'Rockwell'; 
    src: url('<%= asset_path("Rockwell.ttf") %>'); 
    font-weight: normal; 
    font-style: normal; 
    strong { 
    src: url('<%= asset_path("RockwellBold.ttf") %>'); 
    } 
    em { 
    src: url('<%= asset_path("RockwellItalic.ttf") %>'); 
    } 
}

來源

2013-02-21 Sasha

[使用@字體面使用Rails 3.1的應用程序？]的可能重複（HTTP：/ /stackoverflow.com/questions/7973271/using-font-face-with-rails-3-1-app） – 2013-02-21 16:31:16

賓果！但有一個問題。如何使用@ font-face加載字體的斜體和粗體版本？它現在沒有處理強大的電子標籤。我應該嘗試上面的編輯嗎？ – Sasha 2013-02-21 17:15:33

對我有用：

我添加的字體到一個新的資產/ fonts /目錄中，然後補充說，資產路徑

的config/application.rb中

config.assets.paths << "#{Rails.root}/app/assets/fonts"

然後，我宣佈了一堆字體 - 的面孔，我單獨分配給項目，我想正常，粗體和斜體：

typography.css.erb.scss

/* font families */ 

@font-face { 
    font-family: 'Rockwell'; 
    src: url('<%= asset_path("Rockwell.ttf") %>'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'Rockwell Italic'; 
    src: url('<%= asset_path("RockwellItalic.ttf") %>'); 
} 
@font-face { 
    font-family: 'Rockwell Bold'; 
    src: url('<%= asset_path("RockwellBold.ttf") %>'); 
} 

p, ol, small, ul, li, td, th, h3, h4, h5 ,h6, label { 
    font-family: Rockwell; # The elements I wanted defaulted to normal 
} 

h1, h2, a, strong { 
    font-family: 'Rockwell Bold'; # The elements I wanted defaulted to bold 
} 

li { 
    small { 
    font-family: 'Rockwell Bold'; # Subset I wanted defaulted bold 
    } 
} 

em { 
    font-family: 'Rockwell Italic'; # Manual italic 
} 

# Whenever I wanted italic or bold, I did it through font-family for consistency.

這意味着所有打開的CSS文件到css.erb.scss文件，因此他們明白「<％= asset_path」

來源

2013-02-23 21:44:00 Sasha

在Rails項目，我strucutre的字體作爲我的樣式或圖片做：

風格/樣式表/ myStyle.css

風格/圖片/ myImage.jpg

風格/字體/ myFont.ttf

來源

2013-02-21 16:59:48 plucile

謝謝。剛剛做到了，按照上面的鏈接重複問題。儘管如此，仍然試圖弄清楚如何以粗體/斜體包裝。我正在嘗試上面的工作？（我只是在詢問/除此之外對此進行測試，因爲測試涉及推送網站並讓朋友在瀏覽器中查看並報告。） – Sasha 2013-02-21 17:19:33

Rails應用程序未加載的自定義字體

回答

相關問題