Changer la police par défaut dans vuetify

Je ne peux pas comprendre comment modifier la police par défaut dans vuetify. J'ai été à la recherche pour le droit de la variable à l'intérieur ./node_modules/vuetify, mais je ne peux pas le localiser.

J'aimerais mieux ne pas apporter des modifications dans le module, mais plutôt de remplacer ces variables à partir de l'extérieur du module.

InformationsquelleAutor ba_ul | 2017-08-09
  1. 13

    La façon la plus simple serait tout simplement de définir la police de caractères de la famille sur body. Si vous utilisez webpack et de l'importation de la Vuetify stylet entrée, main.styl, vous pouvez simplement remplacer le $font-family variable avec n'importe quelle police que vous voulez.

    • Merci. Cela m'a dirigé dans la bonne direction. J'ai trouvé le nom de la variable que je devais remplacer est $body-font-family.
    • Vraiment merveilleux de travailler avec vuetify, par la manière. Je suis amoureuse de comment facilement et rapidement, je peux avoir une attrayante et fonctionnelle de l'interface utilisateur et en cours d'exécution. À l'aide de pug/jade rend encore plus amusant. J'ai commencé à appuyer sur Patreon ainsi. Espérons qu'il continue à aller mieux.
    • Toutes les variables qui peuvent être modifiées peuvent être trouvés ici: github.com/vuetifyjs/vuetify/blob/master/src/stylus/settings/...
    • Juste pour mettre à jour @adelriosantiago s 'lien, c'est github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/... en novembre 2018
    • J'ai trouvé cet article utile, qui est basé sur la même idée: medium.com/@jacobedawson/...
    InformationsquelleAutor John Leider
  2. 10

    J'ai remarqué que, au moins dans les versions récentes de Vuetify, vous devez spécifier à la fois $body-font-family et $heading-font-family pour modifier les polices de tout, de Roboto à quelque chose d'autre dans vos remplacements (à la suite de ces instructions). La redéfinition de $headings semble être nécessaire car il est défini dans _variables.styl et dépend $heading-font-family. Notez que Vuetify sera le déplacement à SCSS en 2.0 donc il y aura un nouveau processus à ce stade.

    $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 }
}
    • Je veux avoir une police différente pour les titres. J'ai fait ce que vous recommandez, mais peu importe ce que j'essaie, il ne semble pas vouloir remplacer $heading-font-family. Tous mes titres ont toujours quelle que soit la police est définie pour $body-font-family.
    • Compris. Bizarrement, le font-family n'est pas appliquée à h* éléments, sauf si vous appliquez l'un des rubrique classes, par exemple .headline ou .display-1. Ce n'est pas intuitif.
    InformationsquelleAutor jeffbaumes
  3. 2

    Je ne peux pas garantir que c'est de la "meilleure pratique". Mais considérant qu'il n'existe pas de documentation sur la façon de le faire correctement, je vais vous dire comment je l'ai accompli.

    Je suis en utilisant le Nuxt webpack modèle donc mon fichier de structure peut être un peu différente de la vôtre, mais le concept est le même.

    J'ai une statique du dossier des actifs. Dans ce dossier j'ai un global fichier css. J'ai téléchargé la police, j'ai été en utilisant comme un fichier et de l'ajouter à mon répertoire statique ainsi. Mais vous pouvez mettre à peu près n'importe où.

    Voici le code que j'ai ajouté à mes fichier CSS:

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

    Ensuite vous suffit de l'ajouter pour vous des règles de style comme vous le feriez normalement

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

    ect...

    N'oubliez pas d'entrer le format correct. Si votre fichier se télécharge comme un .la fto il est opentype. Si il est .ttf c'est truetype.

    Je n'ai pas encore compris comment inclure une police à partir de CDN. Si je ne figure que je vais vous laisser savoir.

    • C'est de cette façon j'ai d'abord résolu (je suis également en utilisant Nuxt). Mais j'ai maintenant, au lieu de redéfinir les $body-font-family variable dans la main.styl fichier.
    • Vous pouvez utiliser une police à partir de CDN exactement de la même façon. Il suffit de pointer votre src: url() à la police CDN emplacement. Voir ici: fonts.googleapis.com/css?family=Racing+Sans+One
    InformationsquelleAutor vark47
  4. 2

    Meilleure façon, Dans votre application.vue de script ajouter

    .application {
  font-family: "Font Family Name";
}

    Par exemple, si vous utilisez des polices google, votre balise de script devrait ressembler à

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

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

    Pour Laravel Vuetify utilisateurs, ce dont vous aurez besoin:
    Mise à jour de votre webpack.min.js fichier ressemble à:

    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');

    Votre main.styl doit être situé dans la trajectoire: resources\stylus\main.styl
    Votre main.styl fichier devrait ressembler à ceci: 

    @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'

    Pour éviter Vuetify de l'écriture des styles en ligne qui pourrait remplacer votre main.css, n':

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

    Et enfin, d'assurer un stylet chargeur est le programme d'installation déjà, si pas exécuter en ligne de commande:

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

    Vous pouvez également npm install matériau-design-icônes-iconfont.

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