☰

Vue.js プロジェクトにフォントを追加する方法 質問する

tag-icon • tag-icon javascript laravel vue.js sass
Vue.js プロジェクトにフォントを追加する方法 質問する

私はLaravelとVue.jsを使ったプロジェクトを持っていて、scssを使っています。プロジェクトに新しいフォントを追加したいのですが、できません。fonts.scssファイルを作成し、フォントで変数を作成します。

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

$proxima-nova-bold: 'Proxima Nova Bold', sans-serif;

そしてコンソールのミスがありますGET http://local.{my-domain}/Proxima-Nova-Bold.otf net::ERR_ABORTED

Vueコンポーネントにscssファイルをインポートする方法は次のとおりです。

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

これが私のLaravelミックスです

let mix = require('laravel-mix');

mix.copy('resources/assets/images', 'public/images', false)
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')

どこで間違えたのでしょうか? または、フォントを正しく追加する方法を教えてください。

ベストアンサー1

vue3で動作します

  1. フォントをダウンロードし、他の静的アセットと一緒に配置します。
  2. app.vue では、以下のように @font-face を使用してフォント ファミリを登録します。
<style>
@font-face {
    font-family: <name_u_choose>;
    src: url('~@/assets/fonts/<static_font_file>.ttf');
}
  1. 以下のようにコンポーネントで使用します
<style>
<you-selector> {
    font-family: <name_u_chose_before>;
}
</style>

おすすめ記事