外部 css 和@font-face

Question

全部。我经常引用并感谢社区和专业知识。很棒的网站！我是菜鸟会员，多多包涵

问题：嵌入文件不是 loaded/displayed

ROOT DIR 有两个目录：plugins 和 project

插件有文件 mycss.css 和 4 个字体文件（2 个 woff，2 个 ttf）

mycss.css

@font-face {
  font-family: 'ALG';
  src: url('ALGbvs.woff') format('woff'),
       url('ALGbvs.ttf') format('truetype');
}
@font-face {
  font-family: 'BVS';
  src: url('BitstreamVeraSans.woff') format('woff'),
       url('BitstreamVeraSans.ttf') format('truetype');
}

index.html 包含（节选）

<head>
...
<!-- font-family: ALG and BVS -->
<link href="../plugins/mycss.css" rel="stylesheet" type="text/css" />
...
<style>
body {
font-family: ALG;
  background-color: #F9EFE2;
  margin: 0;
}
</style>
</head>

我以为我正确引用了 css 文件和字体，但正文中没有 loaded/displayed。我错过了什么？感谢所有阅读和回复。

Answer 1

您错过了在 css 中定义来源。像这样添加完整字体 url 位置：

@font-face {src: url("../plugins/ALGbvs.ttf");}

Answer 2

首先使用 @font-face 更通用的方式，例如

使用此字体生成器工具为所有主流浏览器生成字体文件Font-Face Generator

@font-face {
    font-family: "ALG";
    src: url("myfont/ALGbvs.eot");
    src: url("myfont/ALGbvs.eot?#iefix") format("embedded-opentype"),
         url("myfont/ALGbvs.woff") format("woff"),
         url("myfont/ALGbvs.ttf") format("truetype"),
         url("myfont/ALGbvs.svg#ALG") format("svg");
    font-weight: normal;
    font-style: normal;
}

然后检查你提到的字体文件路径是否正确，让我们假设你所有字体的文件夹说“myfont”在你保存你的 css 文件。

然后你的 body 标签会像，

body {
    font-family: "ALG";
}

外部 css 和@font-face

external css and @font-face

css

font-face