自定義字體在Rails上不起作用

Question

我已經閱讀了很多有關如何在Rails應用程序上使用自定義字體的文章，但是我仍然遇到麻煩。

我從dafont.com下載了X字體。 我將其解壓縮，該軟件包包含x.otf。 然后，我將其安裝在計算機上，但是當我在應用程序中使用它時，字體變形了。

然后，我從dafont.com下載了Y字體。 我解壓縮，其中包含y.ttf。 我沒有將其安裝在計算機上，而是將其放置在/ assets / fonts中。 然后，在我的custom.css.scss文件中添加了以下內容。

@font-face {
  font-family: 'Nokia Pure Headline';    
  src: url('/assets/fonts/y.ttf');
  src: url('/assets/fonts/y.ttf?iefix') format('eot'),
  url('/assets/fonts/y.woff') format('woff'),
  url('/assets/fonts/y.ttf') format('truetype'),
  url('/assets/fonts/y.svg#webfont3AwWkQXK') format('svg');
  font-weight: normal;
  font-style: normal;
}

然后，在我的custom.css.scss樣式表中將其命名

body {
    font-family: y;
}

當我刷新時仍然沒有成功。 關於X為何變形或Y無效的任何線索？

Answer 1

您可以將資產管道與字體一起使用。 首先添加application.rb：

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

將custom.css.scss文件重命名為custom.css.scss.erb ， asset_path每個字體文件使用asset_path ，如下所示：

@font-face {
  font-family: 'Nokia Pure Headline';    
  src: url('<%= asset_path("y.ttf") %>');
  src: url('<%= asset_path("y.ttf?iefix") %>') format('eot'),
  url('<%= asset_path("y.woff") %>') format('woff'),
  url('<%= asset_path("y.ttf") %>') format('truetype'),
  url('<%= asset_path("y.svg#webfont3AwWkQXK") %>') format('svg');
  font-weight: normal;
  font-style: normal;
}