Question

I tried following this thread here but I am not able to duplicate their results.

的main.css

h1 {
  font-family: 'Shadows Into Light', serif;
  src: url('/assets/fonts/shadows.ttf') format("Shadows Into Light");
  font-size: 40px;
  text-align: center;
  position: relative;
  bottom: 20px; 
  margin: 0 auto 0 auto;
  width:100px;
}

资产目录

assets
|
|
---stylesheets
|  |
|   ---main.css
---images
|
|
---images
| 
|
---fonts
   |
    ---shadow.ttf

此外，我尝试手动将fonts目录包含在我的资产管道中：

配置/ application.rb中

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

如何在我的Rails应用程序中包含ttf自定义字体？

Answer 1

@font-face  {
  font-family: 'yourfont';
  src: url('addres-yourfont.eot?#') format('eot'),  /* IE6–8 */
       url('addres-yourfont.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
       url('addres-yourfont.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}

Answer 2

您根本不需要使用资产管道。只需使用google fonts并在 layouts.html.erb 中添加提供的网址即可。但是，当您包含指向字体的链接时，请确保将src指示为https而不是http。换句话说，而不是：

  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Shadows+Into+Light">

使用

  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Shadows+Into+Light">

后者是通过https而不是http请求的。您无法使用Heroku通过非安全协议请求资产。

如何在我的Rails应用程序中包含ttf自定义字体？

2 个答案: