Question

我的问题是使用@font-face时无法显示自定义字体。

我的CSS在其自己的文件中引用，代码为：

@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;
    }

在我的HTML文件中，我将其作为以下主要CSS文件引用：

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

我怀疑我错误地引用了它，但我无法找到如何正确引用它。

Answer 1

你的文件夹结构是什么？如果你在文件夹“css”中调用css，你必须指出自定义字体的正确路径像这样“../"

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

Answer 2

以下是如何使用@ font-face：

的示例

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

我假设您已经检查了字体文件的e路径并且它们是正确的。我还假设您已经检查了错误控制台是否有任何CSS警告或错误，例如找不到文件。

尝试仔细检查您在代码中将字体指定为font-family的位置。

另外，font-face引用：http://reference.sitepoint.com/css/at-fontface

更新：从Google

尝试WebFont Loader

为什么我不能实现@ font-face？

2 个答案: