Question

很抱歉，如果这是一个愚蠢的问题，但我将存储在我的计算机上的字体导入到CSS文件中，虽然它可以在Chrome中使用，但它不适用于Microsoft Edge或Internet Explorer。我没有任何其他浏览器，所以我无法检查这些浏览器，我想知道是否有人知道原因。

链接CSS：

@font-face {
    font-family: 'Linotte';
    src: url('...\font\Linotte\Linotte.otf') format('otf'),
         url('...\font\Linotte\Linotte.woff2') format('woff2'),
         url('...\font\Linotte\Linotte.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

我读到Edge没有.woff2支持，所以我认为链接.otf和.woff版本会有所帮助，但它没有。我在Chrome控制台中的任何页面上都会出现以下错误：.woff和.woff2：

Failed to load resource: net::ERR_FILE_NOT_FOUND

但是，该错误并未显示在Edge控制台或IE控制台中。

当我进入消息来源时，这就是显示的内容（我还没有让我看到图片，我很新）：Sources

Linotte文件夹所在的文件夹与CSS工作表所在的文件夹位于同一文件夹中，因此我不明白为什么它没有显示正确的内容。

Answer 1

尝试用...替换三个..：

@font-face {
    font-family: 'Linotte';
    src: url('..\font\Linotte\Linotte.otf') format('otf'),
         url('..\font\Linotte\Linotte.woff2') format('woff2'),
         url('..\font\Linotte\Linotte.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

此外，惯例是使用正斜杠，而不是向后斜杠。

字体在Microsoft Edge或IE中不起作用

1 个答案: