web-dev-qa-db-fra.com

Changer la police par défaut dans vuetify

Je n'arrive pas à comprendre comment changer la police par défaut dans vuetify. J'ai cherché la bonne variable dans ./node_modules/vuetify, mais je ne la trouve pas.

Dans l'idéal, je ne ferais aucun changement dans le module, mais préférerais remplacer ces variables de l'extérieur du module.

vue.jsvuetify.js
8
ba_ul

Le moyen le plus simple serait simplement de définir la famille de polices sur body. Si vous utilisez Webpack et importez l'entrée de stylet Vuetify, main.styl, vous pouvez simplement écraser la variable $font-family avec la police de votre choix.

10
John Leider

J'ai remarqué que, du moins dans les versions récentes de Vuetify, vous devez spécifier à la fois $body-font-family et $heading-font-family pour changer les polices de Roboto en un autre dans vos remplacements (en suivant ces instructions ). La redéfinition de $headings semble être nécessaire car elle est définie dans _variables.styl et dépend de $heading-font-family. Notez que Vuetify sera en train de passer à SCSS in 2.0, il y aura donc un nouveau processus à ce moment-là.

$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 }
}
6
jeffbaumes

Je ne peux pas garantir qu'il s'agisse d'une "meilleure pratique". Mais étant donné qu’il n’ya pas de documentation sur la manière de procéder, je vais vous dire comment j’ai accompli cela.

J'utilise le modèle Nuxt Webpack, ma structure de fichier peut donc être un peu différente de la vôtre, mais le concept est le même.

J'ai un dossier d'actifs statiques. Dans ce dossier, j'ai un fichier css global. J'ai téléchargé la police que j'utilisais sous forme de fichier et je l'ai également ajoutée à mon répertoire statique. Mais vous pouvez le dire à peu près n'importe où.

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

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

Ensuite, il vous suffit de l'ajouter à vos 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 bon format. Si votre fichier est téléchargé au format .otf, il est de type opentype. Si c'est .ttf c'est vrai.

Je n'ai pas encore compris comment inclure une police de CDN. Si je découvre cela, je vous le ferai savoir. 

1
vark47

Better way , Dans votre script app.vue, ajoutez

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

Par exemple, si vous utilisez une police Google, votre balise de script doit ressembler à

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

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