Загрузка пользовательских шрифтов в проекте Nuxt / Tailwind - PullRequest
Новая
       39

Загрузка пользовательских шрифтов в проекте Nuxt / Tailwind

0 голосов
/ 25 апреля 2020

Привет всем и извините, мой английский sh.

Я создал проект nuxt. js с Tailwind. Я хотел бы настроить свое семейство шрифтов, поэтому я скачал несколько файлов шрифтов из Google Fonts. Я читал документы Tailwind, но я не могу понять, где я должен разместить файлы шрифтов и как настроить Tailwind для загрузки файлов.

Буду очень признателен, если кто-нибудь сможет мне помочь.

Ответы [ 2 ]

0 голосов
/ 26 апреля 2020

Большое спасибо, Рамигс. После нескольких часов тест-ошибок, прежде чем узнать ваш ответ, я нашел другое решение. Я поместил мои файлы шрифтов в папку «шрифты», которую я создал внутри папки «stati c». В активах> css> tailwind. css: 

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@font-face {
    font-family: 'Roboto';
    font-weight: 700;
    src: url('/fonts/Roboto/Roboto-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'OpenSans';
  font-weight: 500;
  src: url('/fonts/OpenSans/OpenSans-Medium.ttf') format('truetype');
}

В tailwind.config: 

theme: {
    extend: {
        fontFamily: {
             heading: ['Roboto', 'sans-serif'],
             body: ['OpenSans', 'sans-serif']
        }
    }
}

После этого необходимо использовать класс «font-heading» или « font-body "в элементе, который вы хотите. Вес шрифта шрифта должен быть связан с классами шрифта-веса Tailswind. Может быть, сейчас у нас есть 2 разных решения. Еще раз спасибо.

0 голосов
/ 25 апреля 2020

Я предполагаю, что вы используете модуль @ nuxtjs / tailwind css.

  1. Сначала вам нужно будет запустить npm run build, чтобы файлы попутного ветра были создано:

    • ~ / tailwind.config. js
    • ~ / assets / css / tailwind. css

  2. Создайте папку fonts в assets и поместите загруженные шрифты.

  3. Включите ваши шрифты в ~/css/tailwind.css, например: 

@include font-face( KapraNeuePro, '~/assets/fonts/KapraNeueProFamily/Kapra-Neue-Pro-Regular', 400, normal, otf);
@include font-face( KapraNeuePro, '~/assets/fonts/KapraNeueProFamily/Kapra-Neue-Pro-Medium', 600, medium, otf);

et c.

Ознакомьтесь с документами попутного ветра о том, как добавлять семейства шрифтов в tailwind.config.js и какая конфигурация лучше соответствует вашим потребностям: (следующий пример является быстрым рабочим) 
module.exports = {
  theme: {
    fontFamily: {
      sans: ["KapraNeuePro"],
      serif: ["KapraNeuePro"],
      mono: ["KapraNeuePro"],
      display: ["KapraNeuePro"],
      body: ["KapraNeuePro"]
    },
    variants: {},
    plugins: []
  }
};
Не забудьте удалить из макета и страницы все по умолчанию CSS, относящиеся к font-family
...