@ font-face源中的相对URL不起作用

Question

I downloaded Delicious-Roman font and I want to use it in my CSS page. It doesn't seem to work with relative URL, but when i placed it in same folder as my CSS page, it worked! My folders look like this:

-Project
   -Fonts
       -Delicious-Roman.otf
   -Folder
       -Project.html
       -ProjectStyle.css

So I did this:

@font-face{
   font-family: Delicious;
   src: url(../Fonts/Delicious-Roman.otf);
}
div{
   font-family: Delicious;
}

But it doesn't work. When i put Delicious-Roman.otf in Folder and do this:

 @font-face{
   font-family: Delicious;
   src: url(Delicious-Roman.otf);
}
div{
   font-family: Delicious;
}

its all good and it works. Also I've seen people put format(otf); next to the src , but i don't know why.

Answer 1

You are probably testing this in Firefox. Try Chrome and it will work. For the Firefox fix, see: Bootstrap 3 unable to display glyphicon properly