web-dev-qa-db-ja.com

vuetifyでデフォルトのフォントを変更する

Vuetifyでデフォルトのフォントを変更する方法がわかりません。 ./node_modules/vuetify内で適切な変数を探していましたが、見つけることができません。

理想的には、モジュールに変更を加えず、モジュールの外部からそのような変数をオーバーライドします。

vue.jsvuetify.js
12
ba_ul

最も簡単な方法は、bodyにフォントファミリを設定することです。 Webpackを使用してVuetifyスタイラスエントリmain.stylをインポートしている場合、$font-family変数を任意のフォントで上書きできます。

14
John Leider

少なくとも最近のバージョンのVuetifyでは、$body-font-familyと$heading-font-familyの両方を指定して、すべてのフォントをRobotoから他のオーバーライドに変更する必要があることに気づきました（ 指示 ）。 $headingsで定義され、_variables.stylに依存するため、$heading-font-familyの再定義が必要と思われます。 Vuetifyは SCSSに移行 2.0になるため、その時点で新しいプロセスが存在することに注意してください。

$body-font-family = 'Barlow Condensed', sans-serif
$heading-font-family = 'Barlow Condensed', sans-serif
$headings = {
  h1: { size: 112px, weight: 300, line-height: 1, letter-spacing: -.04em, font-family: $heading-font-family },
  h2: { size: 56px, weight: 400, line-height: 1.35, letter-spacing: -.02em, font-family: $heading-font-family },
  h3: { size: 45px, weight: 400, line-height: 48px, letter-spacing: normal, font-family: $heading-font-family },
  h4: { size: 34px, weight: 400, line-height: 40px, letter-spacing: normal, font-family: $heading-font-family },
  h5: { size: 24px, weight: 400, line-height: 32px, letter-spacing: normal, font-family: $heading-font-family },
  h6: { size: 20px, weight: 500, line-height: 1, letter-spacing: .02em, font-family: $heading-font-family },
  subheading: { size: 16px, weight: 400 },
  body-2: { size: 14px, weight: 500 },
  body-1: { size: 14px, weight: 400 },
  caption: { size: 12px, weight: 400 },
  button: { size: 14px, weight: 500 }
}
10
jeffbaumes

最良の方法

定義（Googleフォントを使用する場合）

@import url('https://fonts.googleapis.com/css? family=Oxygen:300,400,700&display=swap');
@import url('https://fonts.googleapis.com/css? family=Comfortaa&display=swap');

$body-font-family: 'Oxygen';
$title-font: 'Comfortaa';

ために vuetify 2+

.v-application {
   font-family: $body-font-family, sans-serif !important;
    .title { // To pin point specific classes of some components
       font-family: $title-font, sans-serif !important;
    }
 }

App.vueまたはapp.vueに直接インポートされた別のscss/cssファイル

ために vuetify 1.5.x app.vueスクリプトに追加します

.application {
  font-family: "Font Family Name";
}
.headline,
.title,
.subheading{
     font-family: $body-font-family !important;
}

たとえば、Googleフォントを使用している場合、スクリプトタグは次のようになります。

<style lang="scss">
@import url("https://fonts.googleapis.com/css?family=Questrial");

.application {
  font-family: "Questrial";
}
</style>
2
bhaskar

これが「ベストプラクティス」であることを保証することはできません。しかし、これを適切に行う方法に関するドキュメントがないことを考慮して、どのようにこれを達成したかを説明します。

Nuxt webpackテンプレートを使用しているため、私のファイル構造はあなたのものとは少し異なるかもしれませんが、コンセプトは同じです。

静的なアセットフォルダーがあります。そのフォルダー内には、グローバルなcssファイルがあります。ファイルとして使用していたフォントをダウンロードし、静的ディレクトリにも追加しました。しかし、ほとんどどこにでも置くことができます。

グローバルCSSファイルに追加したコードは次のとおりです。

@font-face{
            font-family: **any name you want to give the font**;
            src: url(**location in directory**) format("opentype");
            }

次に、通常のようにスタイリングルールに追加します

    *{
    font-family: **the same name you gave it above**;
 }
   h1{
    font-family: **the same name you gave it above**;
 }

ect ...

正しいフォーマットを忘れずに入力してください。ファイルが.otfとしてダウンロードされる場合、それはopentypeです。 .ttfの場合、truetypeです。

CDNのフォントを含める方法はまだわかりません。私がそれを理解するならば、私はあなたに知らせます。

2
vark47

残念ながら、@ alice-mxの答えは私にはうまくいきませんでした（node_modulesからインポートできませんでした）。

これは私のコードでこの問題を解決した方法です（Vuetify 2を使用して）：

必要な.woff2ファイルをダウンロードしてsrc/assets/fontsに入れた後、このコードをApp.vueファイル（またはプロジェクトで設定したメインvueファイル）に追加しました）：

// App.vue
<style>
$typoOptions: display-4 display-3 display-2 display-1 headline title subtitle-1 subtitle-2 body-1 body-2 caption overline; // all md typography options provided by vuetify

%font-choice {
  font-family: "Noto Sans", sans-serif !important;
}

@mixin md-typography {
@each $typoOption in $typoOptions {
  .#{$typoOption} {
    @extend %font-choice;
  }
}

.v-application { // This is where we'll add all the md-typography classes
  font-size: 12px;
  @extend %font-choice;
  @include md-typography;
}

// add font-face because in this case Noto-Sans is taken from Google fonts
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Noto Sans"), local("NotoSans"),
    url("~@/assets/fonts/noto-sans-v9-latin-regular.woff2") format("woff2");
}
</style>

これが役立つことを願っています！

これ answer は、.scssコードの作成に役立ちました

1
Tzahi Leh

Vuetify 2+を使用している場合、プロセスはjeffbaumesの答えに非常に似ていますが、スタイラスの代わりにSassを使用します

_// src/sass/main.scss
@import '~vuetify/src/styles/styles.sass';

$body-font-family: 'My Custom Font', cursive;

$heading-font-family: $body-font-family, cursive;

@each $heading, $style in $headings {
    $headings: map-merge($headings, ($heading: map-merge($style, ('font-family': $heading-font-family))));
}
_

または、いくつかの見出しスタイルのフォントを変更できますが、次のようなフォントは変更できません。

$headings: map-merge($headings, ('h3': ('font-family': 'Custom Font Name')));

1
alice-mx

Vuetify Module でNuxt.jsを使用してうまくいったのは、次のように、variables.scssで本体フォントを設定するだけでした。

$body-font-family: SofiaPro, Roboto;

他のすべてのフォントは、このフォントから派生しています。

デフォルト変数ファイル（ '〜vuetify/src/styles/styles.sass'）はその後自動的にインポートされ、既に設定されている変数は無視されます（！defaultのおかげです）。したがって、$ heading-font-familyと個々の$ headingsを変更する必要はもうありません。

これをNuxtモジュールで動作させるには、nuxt.config.jsファイルでtreeShake：trueを設定することを忘れないでください。 Nuxt.jsを使用していない場合は、おそらくボディファイルを設定して変数ファイルafterをインポートする必要があります。

0
loomchild

Laravel Vuetifyユーザー、これが必要なすべて：webpack.min.jsファイルを次のように更新します。

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

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/main.scss', 'public/css')
   .stylus('resources/stylus/main.styl', 'public/css');

main.stylは次のパスに配置する必要があります：resources\stylus\main.stylmain.stylファイルは次のようになります。

@import url("https://fonts.googleapis.com/css?family=Literata:400,500,600,700&display=swap");

$body-font-family = 'Literata', serif
$alert-font-size = 18px

@import '~vuetify/src/stylus/main'
// For a-la-carte
@import '~vuetify/src/stylus/app'

Vuetifyがmain.cssをオーバーライドする可能性のあるインラインスタイルを記述しないようにするには、次のようにします。

 mix.options({
      extractVueStyles: true, // Extract .vue component styling to file, rather than inline.
      });

最後に、コマンドラインで実行しない場合は、スタイラスローダーが既にセットアップされていることを確認します。

$ yarn add stylus stylus-loader style-loader css-loader -D
// OR
$ npm i stylus stylus-loader style-loader css-loader --save-dev

Material-design-icons-iconfontをnpmインストールすることもできます。

npm install material-design-icons-iconfont --save
0
DAVID AJAYI