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应用程序未加载的自定义字体

回答

相关问题