Why Can I Not Implement @font-face?

问题

My problem is that custom fonts do not display when using @font-face.

My CSS is referenced in it's own file and the code is:

@font-face {
    font-family: 'MerceariaAntique';
    src: url('type/mercearia_new/21319b_0_0-mercearia.eot');
    src: url('type/mercearia_new/21319b_0_0-mercearia.eot?#iefix') format('embedded-    opentype'),
         url('type/mercearia_new/21319b_0_0-mercearia.woff') format('woff'),
         url('type/mercearia_new/21319b_0_0-mercearia.ttf') format('truetype'),
         url('type/mercearia_new/21319b_0_0-mercearia.svg#webfontuploaded_file')     format('svg');
    font-weight: normal;
    font-style: normal;
    }

In my HTML file I have referenced it as the following alongside the main CSS file:

<link rel="stylesheet" type="text/css" media="all" href="css/fonts.css" />

I suspect I have referenced it incorrectly, but I can't find out how to reference it correctly.

回答1:

what is your folder structure?? if you calling css inside a folder "css" you must point out the correct path to custom fonts like this "../"

src: url('../type/mercearia_new/21319b_0_0-mercearia.eot');

回答2:

Here's an example of how to use @font-face:

@font-face {
  font-family: "Example Font";
  src: url("http://www.example.com/fonts/example");
}
h1 {
  font-family: "Example Font",  sans-serif;
}

I assume you have already checked e paths of the font files and they are correct. I also assume you have checked your Error Console for any CSS warnings or errors like file not found.

Try double checking where you are assigning the font as a font-family in your code.

Also, a font-face reference: http://reference.sitepoint.com/css/at-fontface

UPDATE: Try WebFont Loader from Google

来源：https://stackoverflow.com/questions/12307270/why-can-i-not-implement-font-face

标签

html

css

fonts

font-face