@font-face 不适用于具有正确格式、生成和目录路径的 CSS

Question

我浏览了各种页面，试图弄清楚为什么我的代码不起作用。我看到这是一个很受欢迎的问题，但我确信我已经涵盖了我的所有基础：

我确信我有正确的路径（见下文）
我已经使用 transfonter 生成了正确的文件
transfonter 附带的演示页面有效，因此字体应该有效
我正在使用 Chrome
我调用字体系列：'Sevastopol_Interface';

CSS 代码和目录树：

@font-face {
    font-family: 'Sevastopol_Interface';
    src: url('\Fonts\Sevastopol-Interface\Sevastopol-Interface.eot');
    src: url('\Fonts\Sevastopol-Interface\Sevastopol-Interface.eot?#iefix') format('embedded-opentype'),
        url('\Fonts\Sevastopol-Interface\Sevastopol-Interface.woff2') format('woff2'),
        url('\Fonts\Sevastopol-Interface\Sevastopol-Interface.woff') format('woff'),
        url('\Fonts\Sevastopol-Interface\Sevastopol-Interface.ttf') format('truetype'),
        url('\Fonts\Sevastopol-Interface\Sevastopol-Interface.svg#Sevastopol-Interface') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

编辑：更改了目录。还是不行

Answer 1

只需将字体路径中的反斜杠更改为普通斜杠 (/)。像这样，

src: url('Style-Sheets/Fonts/Sevastopol-Interface/Sevastopol-Interface.eot');

您可以从此处了解更多信息。 HTML File Paths - W3 Schools.

祝一切顺利

Answer 2

@font-face {
    font-family: 'Sevastopol_Interface';
    src: url('Style-Sheets\Fonts\Sevastopol-Interface\Sevastopol-Interface.eot');
    src: url('Style-Sheets\Fonts\Sevastopol-Interface\Sevastopol-Interface.eot?#iefix') format('embedded-opentype');
    src: url('Style-Sheets\Fonts\Sevastopol-Interface\Sevastopol-Interface.woff2') format('woff2');
    src: url('Style-Sheets\Fonts\Sevastopol-Interface\Sevastopol-Interface.woff') format('woff');
    src: url('Style-Sheets\Fonts\Sevastopol-Interface\Sevastopol-Interface.ttf') format('truetype');
    src: url('Style-Sheets\Fonts\Sevastopol-Interface\Sevastopol-Interface.svg#Sevastopol-Interface') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

注意：这只是一个猜测。另见 CSS @font-face Rule

Answer 3

好的，我在 CSS 中使用了 @font-face，如下所示：

@font-face {
  font-family: "Vibes";
  src: url("/src/fonts/GreatVibes-Regular.ttf");
}

转到 google-fonts 并通过单击 + 添加所需的字体，然后通过单击页面右下角的下载来下载这些字体，您的字体 .ttf 文件将是下载后，现在只需将 .ttf file 添加到您的 @font-face src，如上所示。

Answer 4

我发现了问题所在：

@font-face {
  font-family: "Sevastopol_Interface";
  src: url("Fonts//Sevastopol-Interface//Sevastopol-Interface.ttf");
}

问题是我的路径不太正确。反斜杠确实是正确的，但我需要两个而不是一个，因为我在 windows 机器上。不像 linux 这样你只需要一个。感谢@Syed Muhammad Moiz 和@Kusal Darshana 让我得出了这个结论。

@font-face 不适用于具有正确格式、生成和目录路径的 CSS

@font-face is not working for CSS with correct format, generation, and directory path

css

fonts

font-face