@font-face 不适用于我的 ttf 文件。无法正确加载

Question

我需要一些帮助来加载@font-face，我认为我做的一切都正确，我也遵循了 Font Squirrel 中的说明。这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MineplexStalkers</title>
    <link
            rel="icon"
            type="image/png"
            href="https://cdn.glitch.com/47ac82cf-e3bd-4de2-a01d-cce78a6c9980%2F243-2438639_mineplex-logo.png?v=1590274953985"
    />
    <body>
<h2 class="h2mine">
    Welcome to the MineplexStalkers official webpage. We bring to you live Mineplex statistics and game analytics.
</h2>

</body>
<style>

@font-face {
    font-family: 'minecraftmedium';
    src: url('9ff01213-7695-4cf6-8627-1a6f0fa2de18_9ff01213-7695-4cf6-8627-1a6f0fa2de18_minecraft_2-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
#h2{
text-align:left;
padding: 10px;
font-family:minecraftmedium;
}
</style>

请帮助我尝试了很长时间才能摆脱困境。

Answer 1

我又来回答这个问题了，因为我觉得我必须弄清这个问题的真相！

这是一份清单，说明您的 @font-face 可能无法正常工作的原因。

您只使用了 ttf 文件

一些浏览器支持 .ttf 文件。一些浏览器支持 .otf 文件。一些浏览器支持 .woff 文件。一些浏览器支持 .woff2 文件。

因此您需要指定多个文件。像这样：

@font-face {
    font-family: "font name";
    src: url("font.eot") format("embedded-opentype"),
        url("font.woff") format("woff"),
        url("font.woff2") format("woff2"),
        url("font.ttf") format("truetype");
}

如果您没有所有这些字体文件，您可以使用您选择的字体转换器来转换它们。（不过不要忘记，您需要获得字体所有者的许可才能执行此操作）

这里是粗略的 table 支持的字体类型：

        ttf/otf    woff/woff2    eot 
-------------------------------------
Chrome     ●         ●
Firefox    ●         ●
IE         ○         ●          ●
Opera      ● 
Safari     ●

● = supported ○ = partial support

此外，您应该按以下顺序排列它们：

eot
woff/woff2
ttf/otf

确保您的文件格式正确

因此请确保 .ttf 文件的格式为“truetype”，.of 文件的格式为“otf”等。

此外，请确保文件扩展名正确，因为这会阻止它工作。

确保语法正确

检查你的语法。此外，您应该通过 validator 以确保一切都完美无缺。

确保您的文件路径正确

当然，请检查您的控制台，看看是否有任何 404 错误。如果有none，那么它们应该是正确的。

此外，我经常遇到文件路径问题。它们加载了，但 就是不显示 。我经常通过以下方式解决这个问题：

把所有的字体文件放在根目录下（和你放主页的地方一样）
将 @font-face 放入同一目录中名为 font.css 的新文件中
在您的主样式表中使用 @import "font.css" 链接到此文件

我不确定为什么，但它似乎有效...

TL;DR

确保使用不同的格式以获得全面支持
确保格式正确
使用验证器检查语法
检查文件路径是否正确

@font-face 不适用于我的 ttf 文件。无法正确加载

@font-face won't work for my ttf file. Won't load properly

html

css

fonts

truetype

font-face

您只使用了 ttf 文件

确保您的文件格式正确

确保语法正确

确保您的文件路径正确

TL;DR