如何在Vue.js项目中添加字体

Question

我有一个使用Laravel和Vue.js的项目，并且使用了scss。我想将新字体添加到我的项目中，但是我不能这样做。 我创建文件fonts.scss，创建一个字体为

的变量

$OS_VERSION=$([System.Environment]::OSVersion.Version.Major)

if ($OS_VERSION = 6) {
  Write-Output "OS Version is $OS_VERSION"
  # Do stuff...
} elseif ($OS_VERSION = 10) {
  Write-Output "OS Version is $OS_VERSION"
  # Do different stuff..
}

我遇到了控制台错误@font-face { font-family: "Proxima Nova Bold"; src: url(/Proxima-Nova-Bold.otf); } $proxima-nova-bold: 'Proxima Nova Bold', sans-serif;

这是我在Vue组件中导入scss文件的方式

GET http://local.{my-domain}/Proxima-Nova-Bold.otf net::ERR_ABORTED

这是我的幼虫组合

@import '../../../fonts/fonts.scss';

我在哪里犯了错误？ 还是告诉我如何正确添加字体？

Answer 1

基于此问题，laravel mix github laravel mix将在正确引用字体时自动复制字体。

因此，我建议在引用字体时使用相对路径。这实际上应该触发laravel混合，在您的“公共”文件夹中创建一个文件夹“字体”

@font-face {
  font-family: "Proxima Nova Bold";
  src: url('./../fonts/Proxima-Nova-Bold.otf');
}

Answer 2

您可能需要在混合文件中添加如下一行：

.copy('resources/fonts', 'public/fonts')