Как использовать собственное семейство шрифтов темы в CSS попутного ветра? ⇐ CSS
Как использовать собственное семейство шрифтов темы в CSS попутного ветра?
Я создаю статический веб-сайт с помощью попутного ветра и пытался создать собственное семейство шрифтов, но не получилось
Вот мой Tailwind.config.js
/** @type {import('tailwindcss').Config} */ модуль.экспорт = { darkMode: 'класс', содержание: [ "./src/**/*.{html,js}", "./node_modules/flowbite/**/*.js" ], тема: { продлевать: { тема: { семейство шрифтов: { дисплей: ['IBM Plex Mono', 'Menlo', 'monospace'], тело: ['IBM Plex Mono', 'Menlo', 'monospace'], моноширинный: ['Моноширинный2'], }, цвета: { начальный: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', }, вторичное: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5ead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', }, }, }, }, }, плагины: [ require('flowbite/plugin'), ], } Не работают отображаемые, основные и моноширинные шрифты
FontFamily: { дисплей: ['IBM Plex Mono', 'Menlo', 'monospace'], тело: ['IBM Plex Mono', 'Menlo', 'monospace'], моноширинный: ['Моноширинный2'], }, а вот мой input.css (вместо этого я пытался использовать собственный шрифт из .tff для семейства моноширинных шрифтов)
база @tailwind; компоненты @tailwind; утилиты @tailwind; @font-face { семейство шрифтов: «Monospace2»; src: url("font/Monospace.ttf"); } Я использую команду tailwindcss -i src/input.css -o src/output.css --watch на часах, поэтому файл output.css регулярно обновляется. Здесь, в моем файле output.css, я нашел шрифт Monospace2, но не могу найти созданный мной .font-monospace:
@font-face{font-family:"Monospace2";src:url(font/Monospace.ttf)} Класс .font-display, .font-body и .fontMonospace2 не найден, поэтому я подумал, что мне нужно импортировать шрифт самому (моя попытка с семейством шрифтов Monospace2), но я нашел только @font-face , в моем индексном html я попробовал это:
Это содержимое вашего раздела.
это не работает, а если стилизовать вручную, то работает нормально:
.font-Monospace2 { семейство шрифтов: Monospace2; } Это содержимое вашего раздела.
Я также обнаружил в сети, что Monospace.tff загружается правильно, но если я не делаю это вручную, это не так, я что-то пропустил? все еще изучаю CSS попутного ветра, спасибо.
Я создаю статический веб-сайт с помощью попутного ветра и пытался создать собственное семейство шрифтов, но не получилось
Вот мой Tailwind.config.js
/** @type {import('tailwindcss').Config} */ модуль.экспорт = { darkMode: 'класс', содержание: [ "./src/**/*.{html,js}", "./node_modules/flowbite/**/*.js" ], тема: { продлевать: { тема: { семейство шрифтов: { дисплей: ['IBM Plex Mono', 'Menlo', 'monospace'], тело: ['IBM Plex Mono', 'Menlo', 'monospace'], моноширинный: ['Моноширинный2'], }, цвета: { начальный: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', }, вторичное: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5ead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', }, }, }, }, }, плагины: [ require('flowbite/plugin'), ], } Не работают отображаемые, основные и моноширинные шрифты
FontFamily: { дисплей: ['IBM Plex Mono', 'Menlo', 'monospace'], тело: ['IBM Plex Mono', 'Menlo', 'monospace'], моноширинный: ['Моноширинный2'], }, а вот мой input.css (вместо этого я пытался использовать собственный шрифт из .tff для семейства моноширинных шрифтов)
база @tailwind; компоненты @tailwind; утилиты @tailwind; @font-face { семейство шрифтов: «Monospace2»; src: url("font/Monospace.ttf"); } Я использую команду tailwindcss -i src/input.css -o src/output.css --watch на часах, поэтому файл output.css регулярно обновляется. Здесь, в моем файле output.css, я нашел шрифт Monospace2, но не могу найти созданный мной .font-monospace:
@font-face{font-family:"Monospace2";src:url(font/Monospace.ttf)} Класс .font-display, .font-body и .fontMonospace2 не найден, поэтому я подумал, что мне нужно импортировать шрифт самому (моя попытка с семейством шрифтов Monospace2), но я нашел только @font-face , в моем индексном html я попробовал это:
Это содержимое вашего раздела.
это не работает, а если стилизовать вручную, то работает нормально:
.font-Monospace2 { семейство шрифтов: Monospace2; } Это содержимое вашего раздела.
Я также обнаружил в сети, что Monospace.tff загружается правильно, но если я не делаю это вручную, это не так, я что-то пропустил? все еще изучаю CSS попутного ветра, спасибо.
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение