Vue Cli3を使用したフォントへのリンク

こんにちは

vue cli3とvue2で作成されたプロジェクトで、@ font-faceをフォントフォルダー(アセット/フォント)にリンクしようとしています。

木の構造

アセット/sass/utilities/fonts.sass

@font-face
  font-family: 'NeuzeitGroteskBold'
  src: url($font-path + 'NeuzeitGroteskBold/neuzeitgro-bol-webfont.eot')
  src: url($font-path + 'NeuzeitGroteskBold/neuzeitgro-bol-webfont.eot?#iefix') format('embedded-opentype'),
       url($font-path + 'NeuzeitGroteskBold/neuzeitgro-bol-webfont.woff2') format('font-woff2'),
       url($font-path + 'NeuzeitGroteskBold/neuzeitgro-bol-webfont.woff') format('font-woff'),
       url($font-path + 'NeuzeitGroteskBold/neuzeitgro-bol-webfont.ttf') format('font-truetype')
  font-weight: normal
  font-style: normal

アセット/sass/app.sass

@charset "utf-8"
$font-path: '~@/assets/fonts/'
@import 'utilities/all'

../../fontsまたはassets / fontsをパブリックフォルダーまたはfont-urlで試しましたが、何も機能しませんでした...

エラーメッセージはありません。フォントが機能していません。

こんにちは

format('font-woff')別のバグを修正するために使用されいるのは正しくないためです

それはで働いています format('woff')

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Vue CLI3バージョンを使用してVuetifyにカスタムフォントをインポートする方法

分類Dev

Electronで最新バージョンのVue(Vue CLI3)をどのように使用しますか?

分類Dev

Vue CLI3を使用して作成されたPWAのワークボックスCacheFirst戦略の問題

分類Dev

Vue Cli3はdistディレクトリを参照します

分類Dev

Vue Cli3ローカルフォントが読み込まれません

分類Dev

Vue CLI3でVuetifyをインストールした後にコンパイルに失敗しました

分類Dev

webpack-modernizr-Vue CLI3を使用したローダーローダー

分類Dev

vue CLI3のコーヒーラング

分類Dev

ルーターを使用したVue-単一ページのコンポーネントへのリンク

分類Dev

Vue:vue-cliを使用して別のバックエンドサーバーへのプロキシリクエスト

分類Dev

Vue Cli3で生成されたプロジェクトセットのHTMLタイトル

分類Dev

Vue CLI3プロジェクトの仮想ホストを設定する方法

分類Dev

Vue2を使用したクライアント側のフォーム検証

分類Dev

Vue cli3はビルド後にいくつかのタスクを実行します

分類Dev

vue cli3によって生成されたプロジェクトで開発サーバーを起動します

分類Dev

Lodashを使用したVueメソッドのリファクタリング?

分類Dev

Vue CLI3でExtract-Text-Webpack-Pluginを使用する

分類Dev

Vueの要素をクリックした後のイベント

分類Dev

vue.jsを使用したテキストのインクリメントとレンダリング

分類Dev

Vueを使用したJSON応答のフィルタリング

分類Dev

vueを使用したルーターリンクとvuetifyの混乱

分類Dev

vue-cliプロジェクトのパブリックフォルダーを変更します

分類Dev

Vue CLI(Vue3)のmain.tsへのVueAnalyticsのインポート中にエラーが発生しました

分類Dev

Vue / Axios-URLのフォームデータを使用したパッチリクエスト?

分類Dev

テストフォルダー内の相対プロジェクトルートパスを使用したVueインポート

分類Dev

Vue-CLIのパブリックフォルダーにJSONファイルをインポートする方法

分類Dev

vue cli3セットアップ用に追加されたbabel-plugin-transform-object-rest-spreadでオブジェクトを拡散できません

分類Dev

Stripe JSv3を使用したVueコンポーネント

分類Dev

Vue Cli3プロジェクトの特定のエラーを無視するようにEslintを構成する方法

Related 関連記事

  1. 1

    Vue CLI3バージョンを使用してVuetifyにカスタムフォントをインポートする方法

  2. 2

    Electronで最新バージョンのVue(Vue CLI3)をどのように使用しますか?

  3. 3

    Vue CLI3を使用して作成されたPWAのワークボックスCacheFirst戦略の問題

  4. 4

    Vue Cli3はdistディレクトリを参照します

  5. 5

    Vue Cli3ローカルフォントが読み込まれません

  6. 6

    Vue CLI3でVuetifyをインストールした後にコンパイルに失敗しました

  7. 7

    webpack-modernizr-Vue CLI3を使用したローダーローダー

  8. 8

    vue CLI3のコーヒーラング

  9. 9

    ルーターを使用したVue-単一ページのコンポーネントへのリンク

  10. 10

    Vue:vue-cliを使用して別のバックエンドサーバーへのプロキシリクエスト

  11. 11

    Vue Cli3で生成されたプロジェクトセットのHTMLタイトル

  12. 12

    Vue CLI3プロジェクトの仮想ホストを設定する方法

  13. 13

    Vue2を使用したクライアント側のフォーム検証

  14. 14

    Vue cli3はビルド後にいくつかのタスクを実行します

  15. 15

    vue cli3によって生成されたプロジェクトで開発サーバーを起動します

  16. 16

    Lodashを使用したVueメソッドのリファクタリング?

  17. 17

    Vue CLI3でExtract-Text-Webpack-Pluginを使用する

  18. 18

    Vueの要素をクリックした後のイベント

  19. 19

    vue.jsを使用したテキストのインクリメントとレンダリング

  20. 20

    Vueを使用したJSON応答のフィルタリング

  21. 21

    vueを使用したルーターリンクとvuetifyの混乱

  22. 22

    vue-cliプロジェクトのパブリックフォルダーを変更します

  23. 23

    Vue CLI(Vue3)のmain.tsへのVueAnalyticsのインポート中にエラーが発生しました

  24. 24

    Vue / Axios-URLのフォームデータを使用したパッチリクエスト?

  25. 25

    テストフォルダー内の相対プロジェクトルートパスを使用したVueインポート

  26. 26

    Vue-CLIのパブリックフォルダーにJSONファイルをインポートする方法

  27. 27

    vue cli3セットアップ用に追加されたbabel-plugin-transform-object-rest-spreadでオブジェクトを拡散できません

  28. 28

    Stripe JSv3を使用したVueコンポーネント

  29. 29

    Vue Cli3プロジェクトの特定のエラーを無視するようにEslintを構成する方法

ホットタグ

アーカイブ