时间戳

首页 > 解决方案 > Vue + Laravel：在单个 Vue 组件中包含字体

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

问题描述

我有一个 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');
}

标签： laravelvue.js

解决方案

假设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');
}

要查看加载过程是否出现问题，请打开您喜欢的浏览器开发工具的网络40x选项卡，然后查找错误。

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

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

推荐阅读