использование шрифта попутного ветра из локальных файлов по всему миру - PullRequest
Новая
       8

использование шрифта попутного ветра из локальных файлов по всему миру

0 голосов
/ 25 марта 2020

В настоящее время я делаю это в своих тегах стиля 

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

* {
  font-family: 'Roboto', sans-serif;
}

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

Sidenote:

Я использую Vuejs и следовал руководству по настройке попутного ветра для Vue здесь

https://www.youtube.com/watch?v=xJcvpuELcZo

1 Ответ

3 голосов
/ 25 марта 2020

Вы можете настроить Tailwind, если он был установлен как зависимость от вашего проекта, используя npm install tailwindcss

Шаги:

  • скопируйте скачанный шрифт и поместите его внутрь папка fonts внутри вашего проекта.

  • запустите npx tailwind init, чтобы создать пустую tailwind.config.js

  • Внутри tailwind.config.js add fontFamily внутри extend и укажите семейство шрифтов для переопределения (семейство Tailwind по умолчанию sans). Поместите недавно добавленное семейство шрифтов в начало ( порядок имеет значение ) 

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'sans': ['Roboto', 'Helvetica', 'Arial', 'sans-serif']
      }
    },
  },
  variants: {},
  plugins: []
}

Важно : Использование extend добавит новое указанные семейства шрифтов без переопределения всего стека шрифтов Tailwind.

Затем в основном файле tailwind.css (куда вы импортируете все функции попутного ветра) вы можете импортировать ваше локальное семейство шрифтов. Вот так: 

@tailwind base;
@tailwind components;

@font-face {
  font-family: 'Roboto';
  src: local('Roboto'), url(./fonts/Roboto-Regular.ttf) format('ttf');
}

@tailwind utilities;

Теперь перекомпилируем CSS. Если вы следуете документации Tailwind , это обычно делается с помощью post css: 

postcss css/tailwind.css -o public/tailwind.css

Если вы не используете post css, вы можете запустить: 

npx tailwindcss build css/tailwind.css -o public/tailwind.css

Теперь вы должны отобразить только что добавленное семейство шрифтов.

...