Я не могу понять, как изменить шрифт по умолчанию в vuetify. Я искал правильную переменную внутри. / node_modules/vuetify, но я не могу ее найти.
Я бы идеально не вносил никаких изменений в модуль, но предпочел бы переопределить такие переменные извне модуля.
Самый простой способ - просто установить семейство шрифтов на body. Если вы используете webpack и импортируете запись стилуса Vuetify, main.styl, вы можете просто перезаписать переменную $font-family любым шрифтом, который вы хотите.
Я заметил, что, по крайней мере, в последних версиях 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 }
}
Я не могу гарантировать, что это "лучшая практика". Но, учитывая, что нет документации о том, как это сделать должным образом, я расскажу вам, как я это сделал.
Я использую шаблон веб-пакета Nuxt, поэтому моя файловая структура может немного отличаться от вашей, но концепция одинаков.
У меня есть папка с статическими ресурсами. Внутри этой папки у меня есть глобальный файл 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**;
}
ЭСТ...
Не забудьте ввести правильный формат. Если ваш файл загружается как .otf, это opentype. Если это .ttf, это truetype.
Я еще не понял, как включить шрифт из CDN. Если я это выясню, я дам вам знать.
Лучший способ
Определите (если вы используете шрифты 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 или отдельном файле scss/css, импортированном непосредственно в app.vue
Для 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>
Если вы используете Vuetify 2+, процесс будет очень похож на ответ jeffbaumes, но с использованием Sass вместо Stylus
// 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')));
К сожалению, ответ @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("[email protected]/assets/fonts/noto-sans-v9-latin-regular.woff2") format("woff2");
}
</style>
Надеюсь, это поможет!
Этот ответ помог мне сформировать код .scss
Для пользователей 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.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.
});
И наконец, убедитесь, что стилус-загрузчик уже настроен, если не запускается в командной строке:
$ yarn add stylus stylus-loader style-loader css-loader -D
// OR
$ npm i stylus stylus-loader style-loader css-loader --save-dev
Вы также можете npm установить материал-дизайн-иконки-иконки.
npm install material-design-icons-iconfont --save
Для меня с помощью Nuxt.js с модулем Vuetify было просто установить основной шрифт в variables.scss, например:
$body-font-family: SofiaPro, Roboto;
Все остальные шрифты являются производными от этого.
Файл переменных по умолчанию ('~ vuetify/src/styles/styles.sass') импортируется автоматически впоследствии и игнорирует переменную, если она уже была установлена (благодарю! Default). Поэтому больше нет необходимости изменять $ heading-font-family и отдельные $ заголовки.
Чтобы это работало с модулем Nuxt, не забудьте установить treeShake: true в файле nuxt.config.js. Если вы не используете Nuxt.js, то, вероятно, вам нужно импортировать файл переменных после установки основного шрифта.
Руководство по проектированию материалов