@font-face和.ttf文件的问题

Question

@font-face和.ttf文件的问题

5

我尝试使用@font-face实现我在网上下载的字体（http://www.losttype.com/font/?name=blanch），但是我在任何浏览器上都无法使其正常工作。这是我用来测试字体的示例代码。

<html>
<head>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <div class = "title">
        <p>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</p>
    </div>
</body>
</html>

这是CSS文件:

@font-face {
    font-family: Blanch;
    src: url(‘BLANCH_CONDENSED.ttf’);
}
.title {
    text-align:center;
    font-family: Blanch, 'Helvetica Neue', Arial, Helvetica, sans-serif;
    color:white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

我只有.ttf文件。有人能解释一下为什么它不起作用吗？

- Cilantro Ditrek

可能是https://dev59.com/yG855IYBdhLWcg3wj1MS的重复问题。 - Dan O

你的文件/目录结构是什么？ - gkalpak

我把HTML文件放在与main.css相同的文件夹中。目前，我正在使用上面的代码在两个独立的文件中尝试让字体生效。 - Cilantro Ditrek

2个回答

0

你发布的 .rar 文件中只有 .otf 文件，在你的 CSS 文件中却使用了 .ttf 文件。这可能是问题所在吗？

- EvWill

也许我贴错了链接，但我肯定有一个ttf文件。 - Cilantro Ditrek

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jukka K. Korpela · Accepted Answer

在构造函数 url(‘BLANCH_CONDENSED.ttf’) 中，必须将“智能”单引号替换为Ascii引号（单引号或双引号），例如 url('BLANCH_CONDENSED.ttf')。

您还应该使用FontSquirrel webfont generator 或类似工具生成不同的字体格式以覆盖所有浏览器。