astro font picker

Astro Font Picker

Astro Font Picker - это интеграция панели инструментов Dev, которая позволяет вам опробовать разные шрифты на вашем сайте. Он использует шрифты Google для загрузки более 1000 шрифтов с открытым исходным кодом. Используйте клавиши вверх/вниз, чтобы быстро прокатиться через разные шрифты, или выберите один из списка.

Установка

Автоматическая установка:

 npx astro add astro-font-picker

Ручная установка:

 npm install astro-font-picker

Добавьте следующее в свой файл astro.config.mjs :

 import astroFontPicker from 'astro-font-picker' ;

export default {
  integrations : [
    astroFontPicker ( ) ,
    // other integrations
  ] ,
} ; 

Использование

Astro Font Picker появится в качестве новой иконки на панели инструментов Dev, которая по умолчанию включена в Astro 4.0 и выше.

Отфильтруйте шрифты по типу (необязательно), а затем выберите семью шрифтов. Шрифт будет применен к элементу кузова вашего сайта.

Если у вас есть семейства шрифтов, применяемых к элементам, ниже элемента тела, это не будет переопределять эти шрифты, если вы не позволите Override All Styles .

Подсказка: вы можете использовать клавиши со стрелками вверх/вниз, чтобы быстро ездить на велосипеде через шрифты.

Включено

Это переключает, применяется ли выбранный шрифт к странице. Он включен по умолчанию.

Переопределить все стили

Этот переключатель переопределяет все стили font-family на вашем сайте выбранным шрифтом. Без этого включенного, любые семейства шрифтов, применяемые к элементам, ниже элемента тела, не будут переопределены.

Основная причина для Override All Styles переключен, заключается в том, чтобы поддерживать стиль шрифта определенных элементов или разделов вашего сайта. Таким образом, когда вы используете сборщик шрифта для выбора шрифта для других областей, он не будет переопределять шрифты, которые вы уже определили.

Выход шрифта CSS

Это ссылка на таблицу стилей и CSS, которые вы можете скопировать и вставить на свой сайт, чтобы постоянно установить шрифт. Например:

В стиле вашей head :

 < link rel =" stylesheet " href =" https://fonts.googleapis.com/css2?family=Itim " />

В вашем CSS:

 h1 {
    font-family : Itim , cursive;
}

Просмотр в шрифтах Google

Эта ссылка откроет выбранный шрифт в шрифтах Google.

Настройки хранятся в сессии

Все настройки (включенные, переопределение, тип шрифта и семейство шрифтов) сохраняются в хранении сеанса, поэтому они не теряются, когда страница обновляется во время разработки.

Другой

Этот проект основан на библиотеке Fontable, которая является автономным сборщиком шрифтов, который можно использовать на любом веб -сайте.