Question

我在网络应用中使用自定义字体时遇到问题。我下载了一个名为Chunkfive的字体并将其放在文件夹js中。然后我去了我的app/assets/fonts/文件夹，在那里我保留了所有的CSS并安装了这样的字体：

styles.css.scss

然后我改变了这样的身体字体：

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

然而它并没有奏效。我得到的字体看起来像Times New Roman - 每当我尝试自定义字体时都会发生这种情况。我做错了什么？

Answer 1

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

app/assets/fonts/Chunkfive.otf

来自app/assets/css中的CSS文件，＆＃34;结束路径＆＃34;是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;
}

更改Ruby on Rails字体

1 个答案: