Изменить шрифт по умолчанию в vuetify


Изменить шрифт по умолчанию в vuetify

09.08.2017 10:12:33 Просмотров 323 Источник

Я не могу понять, как изменить шрифт по умолчанию в vuetify. Я искал нужную переменную внутри ./node_modules/vuetify, но я не могу его найти.

В идеале я бы не вносил никаких изменений в модуль, а предпочел бы переопределять такие переменные извне модуля.

У вопроса есть решение - Посмотреть?

Ответы - Изменить шрифт по умолчанию в vuetify / Change default font in vuetify

vark47

11.08.2017 08:39:41

Я не могу гарантировать, что это "лучшая практика". Но учитывая, что нет никакой документации о том, как это сделать правильно, я расскажу вам, как я этого добился.

Я использую шаблон 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**;
 }

электрошок...

Не забудьте ввести правильный формат. Если загрузка вашего файла в качестве .ОТФ это настраивать. Если это так .ttf это truetype.

Я еще не придумал, как включить шрифт из CDN. Если я это выясню, то дам вам знать.

https://stackoverflow.com/questions/45598884/change-default-font-in-vuetify/45640924#comment78528545_45640924
Вот как я впервые решил ее (я также использую Nuxt). Но теперь я вместо этого переопределил переменную $body-font-familyв main.файл стиля.
https://stackoverflow.com/questions/45598884/change-default-font-in-vuetify/45640924#comment78528600_45640924
Вы можете использовать шрифт из CDN точно так же. Просто наведите src: url()на расположение CDN шрифта. Смотрите здесь: fonts.googleapis.com/css?family=Racing+Sans+один
Является ответом!
John Leider

18.08.2017 01:30:03

Проще всего было бы просто установить семейство шрифтов на body. Если вы используете webpack и импортируете запись Vuetify stylus, main.styl, вы можете просто перезаписать переменную $font-familyлюбым шрифтом, который вы хотите.

https://stackoverflow.com/questions/45598884/change-default-font-in-vuetify/45745855#comment78528468_45745855
Спасибо. Это указало мне верное направление. Я нашел имя переменной, которую мне нужно было переопределить, - $body-font-family.
https://stackoverflow.com/questions/45598884/change-default-font-in-vuetify/45745855#comment78528784_45745855
Действительно замечательная работа с vuetify, кстати. Мне нравится, как легко и быстро я могу получить привлекательный и функциональный пользовательский интерфейс. Использование мопса / нефрита делает его еще более увлекательным. Я начал поддерживать и на Патреоне. Надеюсь, что он продолжает становиться лучше.
https://stackoverflow.com/questions/45598884/change-default-font-in-vuetify/45745855#comment92105074_45745855
Все доступные переменные, которые можно изменить, можно найти здесь: github.com/vuetifyjs/vuetify/blob/master/src/stylus/settings​/…
https://stackoverflow.com/questions/45598884/change-default-font-in-vuetify/45745855#comment93265330_45745855
Просто чтобы обновить ссылку @adelriosantiago, это github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/... по состоянию на ноябрь 2018 года
https://stackoverflow.com/questions/45598884/change-default-font-in-vuetify/45745855#comment99559706_45745855
Я нашел, что эта статья тоже полезна, которая основана на подобной идее: medium.com/@jacobedawson/…
jeffbaumes

14.11.2018 02:18:40

Я заметил, что, по крайней мере, в последних версиях 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 }
}
https://stackoverflow.com/questions/45598884/change-default-font-in-vuetify/53298991#comment94462429_53298991
Я хочу иметь другой шрифт для заголовков. Я сделал то, что вы рекомендуете, но независимо от того, что я пытаюсь, он, кажется, не хочет переопределять $heading-font-family. Все мои заголовки по-прежнему имеют любой шрифт, установленный для $body-font-family.
https://stackoverflow.com/questions/45598884/change-default-font-in-vuetify/53298991#comment94464370_53298991
Понять это. Как ни странно, семейство font-familyне применяется к h* или .headline. Это не интуитивно понятно.
bhaskar

04.02.2019 04:05:47

Лучший способ

Определить (если вы используете шрифты 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;
    }
 }

В приложении.vue или отдельный файл scss/css, импортированный непосредственно в приложение.вю

Для vuetify 1.5.x В вашем приложении.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>
https://stackoverflow.com/questions/45598884/change-default-font-in-vuetify/54509124#comment102680800_54509124
Я использую vuetify 2.x, я использовал рекомендованный метод, не работает дальше .headline?
https://stackoverflow.com/questions/45598884/change-default-font-in-vuetify/54509124#comment102689801_54509124
Это потому, что эти классы часто имеют другой шрифт, определенный (шрифт отображения, который заставит его выглядеть немного иначе). Я обновил ответ, чтобы также ссылаться на них.
DAVID AJAYI

13.07.2019 05:39:00

Для пользователей Laravel Vuetify это все, что вам нужно: Обновите свой веб-пакет.минута.файл 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.styl Твой main.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.
      });

И, наконец, убедитесь, что stylus-loader уже настроен, если не запущен в командной строке:

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

Вы также можете установить npm material-design-icons-iconfont.

npm install material-design-icons-iconfont --save
alice-mx

09.08.2019 10:49:43

Если вы используете Vuetify 2+, процесс будет очень похож на ответ джеффбаумса, но с использованием 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')));

https://stackoverflow.com/questions/45598884/change-default-font-in-vuetify/57425646#comment101622461_57425646
не работает для меня = (@each $heading, $style in $headings { ^ неопределенная переменная.
https://stackoverflow.com/questions/45598884/change-default-font-in-vuetify/57425646#comment101658990_57425646
Не забудьте импортировать исходный файл Vuetify sass в верхней части src/sass/main.scss, например: @import ' ~vuetify / src / styles / styles.Сасс';
Tzahi Leh

27.08.2019 10:03:20

К сожалению, ответ @alice-mx не сработал для меня (не удалось импортировать из node_modules).

Вот как я решил эту проблему в своем коде (используя Vuetify 2):


После загрузки разыскивается .WOFF2 файл и поместить его в src / assets / fonts, Я добавил этот код в свое приложение.файл 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>

Надеюсь, это поможет!

Этот ответ помог мне сформировать свое мнение .код scss

https://stackoverflow.com/questions/45598884/change-default-font-in-vuetify/57669275#comment102020214_57669275
"@Tzahi Leh " я последовал вашему предложению, но я вижу частично измененные пользовательские шрифты. Пожалуйста, помогите мне, что я упускаю? Я создал здесь новый пост .
https://stackoverflow.com/questions/45598884/change-default-font-in-vuetify/57669275#comment103335079_57669275
@mmar, ты нашел решение?
https://stackoverflow.com/questions/45598884/change-default-font-in-vuetify/57669275#comment103468538_57669275
'@Цахи Леха-нет, я не мог. Еще я вижу частично изменил тему.
loomchild

27.09.2019 08:02:02

То, что сработало для меня с помощью Nuxt.js с модулем Vuetify просто устанавливал шрифт тела в переменных.СКС, как это:

$body-font-family: SofiaPro, Roboto;

Все остальные шрифты являются производными от этого.

Файл переменных по умолчанию ('~vuetify / src / styles/styles.sass') импортируется автоматически после этого и игнорирует переменную, если она уже была установлена (спасибо !по умолчанию). Поэтому больше нет необходимости менять $ heading-font-family и отдельные $ headings.

Для этого, чтобы работать с модулем Nuxt, не забудьте установить treeShake: true в nuxt.конфиг.файл js. Если вы не используете Nuxt.js, то, вероятно, вам нужно импортировать файл переменных после установки шрифта тела.

Вот пример моего nuxt.конфиг.фрагмент файла js:

buildModules: [
  '@nuxtjs/vuetify'
],

vuetify: {
  treeShake: true,
  customVariables: ['~/assets/variables.scss'],
  ... other Vuetify options
}

Где виарибли.scss содержит приведенное выше определение шрифта.

Я написал короткую статью, объясняющую эту тему, содержащую полный пример кода: https://medium.com/untitled-factory/changing-default-font-in-vuetify-js-and-nuxt-js-3894e726ff10

https://stackoverflow.com/questions/45598884/change-default-font-in-vuetify/58138776#comment106188074_58138776
Я пытался, но ничего не вышло. Есть ли пример nuxt.конфинг? Я использую последнюю версию @nuxtjs/vuetify
https://stackoverflow.com/questions/45598884/change-default-font-in-vuetify/58138776#comment106227947_58138776
@PavelLevin я обновил описание, добавив соответствующий nuxt.конфиг.JS фрагмент. Дайте мне знать, если это работает для вас, и если нет, пожалуйста, поделитесь своей конфигурацией.
https://stackoverflow.com/questions/45598884/change-default-font-in-vuetify/58138776#comment106278551_58138776
При добавлении @nuxtjs/style-resources, node-sassи sass-loadertreeShakeперестает работать. Это странно. github.com/pl-ekleft/nuxt-vuetify-font
https://stackoverflow.com/questions/45598884/change-default-font-in-vuetify/58138776#comment106330477_58138776
Странный. К сожалению, я не могу помочь вам, так как я не использую эти конкретные библиотеки. Я предлагаю отладить, обратиться к их авторам или к Vuetify автору.
https://stackoverflow.com/questions/45598884/change-default-font-in-vuetify/58138776#comment106358590_58138776
Проблема в node-sassи sass-loader. Конфликты с vuetify. Это уже есть в nuxt :)
Omid Matouri

16.12.2019 02:56:12

Это решение работает на Vue-CLI>=3

Прежде всего необходимо установить sass-loader

npm install sass sass-loader fibers deepmerge -D

Вы должны сначала создать папку" sass "в каталоге "src", затем создайте " переменные.scss " файл в этом каталоге.

Затем запишите приведенный ниже код в этот файл.

$ body-font-family: Your-FontName
@import '~vuetify/src/styles/settings/_variables.scss';

Вам нужно перезапустить свой проект прямо сейчас.

https://stackoverflow.com/questions/45598884/change-default-font-in-vuetify/59356155#comment105510391_59356155
Спасибо! Наконец-то ответ, который работает.
Matheus Reis

21.01.2020 07:50:18

Как я этого достиг: (Vuetify 2+)

1) в ваш индекс.HTML, импорт шрифтов.

<link rel="stylesheet" href="<%= BASE_URL %>fonts/<MY_CUSTOM_FONT>/fontface.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Literata:100,300,400,500,700,900">

2) внутри /srcсоздайте styles внутри него

3) в этом файле переопределите значения некоторых переменных:

variables.scss

Надеюсь, это кому-то поможет.

Рекомендации:
https://github.com/vuetifyjs/vuetify/issues/8169
https://vuetifyjs.com/en/customization/sass-variables#example-variable-file

Werner

13.02.2020 05:41:35

Мое решение в (последнем) Nuxt:

Нукс.конфиг:

head: {
.......
link: [
  {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'},
  {
    rel: 'stylesheet',
    href:'https://fonts.googleapis.com/css?family=Raleway:400|Roboto+Slab:200&display=swap'
  }
]
},

vuetify: {
treeShake: true,
customVariables: ['~/assets/variables.scss'],

theme: {
  .....
  },
}
},

переменные.СКС

$body-font-family: Raleway, sans-serif;
$heading-font-family: Roboto Slab, serif;

@import '~vuetify/src/styles/styles.sass';
Помочь в развитии проекта:
Закрыть X