Question

我有一个laravel项目，我在其中使用单视图组件。我有一个global.scss文件，在下面的代码中包含放置在public / fonts文件夹中的字体。在每个vue组件的样式部分中，我正在使用@import '../../css/global.scss';来导入global.scss文件，但是字体似乎仍然不可用。我在此设置上有什么问题吗？

@font-face {
    font-family: 'Testing-Font';
    src: url('/public/fonts/Avenir-Black.tff');
}
@font-face {
    font-family: 'Avenir-Light';
    src: url('/public/fonts/Avenir-Light.tff');
}
@font-face {
    font-family: 'Test-Fontname';
    src: url('/public/fonts/Avenir-Book.tff');
}

Answer 1

假设public是提供网页的目录，您可能应该在字体文件路径中将其忽略：

@font-face {
    font-family: 'Testing-Font';
    src: url('/fonts/Avenir-Black.tff');
}
@font-face {
    font-family: 'Avenir-Light';
    src: url('/fonts/Avenir-Light.tff');
}
@font-face {
    font-family: 'Test-Fontname';
    src: url('/fonts/Avenir-Book.tff');
}

要查看加载过程是否有问题，请打开您喜欢的浏览器开发工具的 network 标签，然后查找40x错误。

如果问题仍然存在（并且由404错误引起），请尝试为字体文件使用相对路径，以避免在构建系统解析根路径（/）时出现未知数。

另外，根据使用情况（库/应用程序），我会将其包含在入口点文件中，以便任何组件都可以使用它。

Vue + Laravel：在单个Vue组件中包含字体

1 个答案: