更改 Ruby on Rails 字体

Question

我在我的 web 应用程序中使用自定义字体时遇到问题。我下载了一个名为 Chunkfive 的字体，并将它放在一个文件夹 app/assets/fonts/ 中。然后我去了我的styles.css.scss文件夹，我保存了我所有的css并安装了这样的字体：

@font-face {
font-family: "Chunkfive";
src: url(app/assets/fonts/Chunkfive.otf) format("truetype");
}

然后我像这样更改了正文的字体：

body {
    padding-top: 70px;
    background-color: #edf9fd !important;
    font-family: "Chunkfive" !important;
}

但它不起作用。我得到了一种看起来像 Times New Roman 的字体——每次我尝试自定义字体时都会发生这种情况。我做错了什么？

Answer 1

主要问题是 CSS 文件中的路径是相对于它所在的文件的 - 所以当你这样做时：

app/assets/fonts/Chunkfive.otf

从app/assets/css 中的CSS 文件，“结束路径”是app/assets/css/app/assets/fonts/Chunkfive.otf，很可能不存在。您很可能想要这样做：

url('../fonts/Chunkfive.otf') format("truetype")

另一个可能的问题是某些字体格式在某些浏览器中不起作用，因此通常最好有多种格式，在这种情况下，您的 CSS 将如下所示：

@font-face {
    font-family: 'Chunkfive';
    src: url('../fonts/Chunkfive-webfont.eot#') format('eot'),
         url('../fonts/Chunkfive-webfont.woff') format('woff'),
         url('../fonts/Chunkfive.otf') format("truetype"),
         url('../fonts/Chunkfive-webfont.svg#webfontM8M0EYs2') format('svg');
    font-weight: normal;
    font-style: normal;
}