为什么不应用此自定义字体？

Question

我从envato下载了一个名为Helio的字体，但我无法将字体输入到我的本地文件中（尚未尝试直播）。

我的代码是

@font-face {
    font-family: 'helios_roundedregular';
    src: url('../css/fonts/helios_rounded-webfont.woff2') format('woff2'),
         url('../css/fonts/helios_rounded-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body {
    line-height: 1.4;
    margin: 0;
    padding: 0;
    font-family: Helios Rounded;
     font-weight: normal;
    font-style: normal;
}

这是文件路径的图片：

我相信这是正确的。我有根文件夹，css文件夹和包含字体文件的字体文件夹。 img显示css和字体文件夹打开

Answer 1

文件名与路径中的字体不同。

变化

src: url('../css/fonts/helios_rounded-webfont.woff2') format('woff2'),
     url('../css/fonts/helios_rounded-webfont.woff') format('woff');

到

src: url('../css/fonts/Helios Regular.woff') format('woff'),
     url('../css/fonts/Helios Rounded.woff') format('woff');

此外，如果您的CSS文件位于css目录中，请省略css目录声明。

src: url('./fonts/Helios Regular.woff') format('woff'),
     url('./fonts/Helios Rounded.woff') format('woff');

Answer 2

你的CSS文件驻留在css目录中，省略了css目录声明。

src：url（＆＃39; ./ fonts / Helios Regular.woff＆＃39;）格式（＆＃39; woff＆＃39;），      url（＆＃39; ./ fonts / Helios Rounded.woff＆＃39;）forma

Answer 3

您似乎使用Font-Family的错误名称，请尝试使用此名称。

 @font-face {
       font-family: 'Helios Rounded';
    }