Перейти к содержимому

Использование пользовательских шрифтов

Это руководство покажет вам, как добавить веб-шрифты в ваш проект и использовать их в ваших компонентах.

Использование локального файла шрифта

Заголовок раздела Использование локального файла шрифта

Этот пример покажет, как добавить пользовательский шрифт, используя файл шрифта DistantGalaxy.woff.

  1. Добавьте ваш файл шрифта в public/fonts/.

  2. Добавьте следующее правило @font-face в ваш CSS. Это может быть в глобальном файле .css, который вы импортируете, в блоке <style is:global>, или в блоке <style> в конкретном макете или компоненте, где вы хотите использовать этот шрифт.

    /* Зарегистрируйте пользовательское семейство шрифтов и сообщите браузеру, где его найти. */
    @font-face {
      font-family: 'DistantGalaxy';
      src: url('/fonts/DistantGalaxy.woff') format('woff');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

  3. Используйте font-family из правила @font-face для стилизации элементов в вашем компоненте или макете. В этом примере заголовок <h1> будет иметь примененный пользовательский шрифт, в то время как параграф <p> - нет.

    src/pages/example.astro
    ---
    ---
    

    <h1>In a galaxy far, far away...</h1>
    

    <p>Custom fonts make my headings much cooler!</p>
    

    <style>
    h1 {
      font-family: 'DistantGalaxy', sans-serif;
    }
    </style>

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

Заголовок раздела Использование Fontsource

Проект Fontsource упрощает использование Google Fonts и других шрифтов с открытым исходным кодом. Он предоставляет npm-модули, которые вы можете установить для нужных вам шрифтов.

  1. Найдите шрифт, который хотите использовать, в каталоге Fontsource. В этом примере будет использоваться Twinkle Star.

  2. Установите пакет для выбранного вами шрифта.

    Окно терминала
    npm install @fontsource/twinkle-star

  3. Импортируйте пакет шрифта в компонент, где хотите использовать шрифт. Обычно это нужно сделать в общем компоненте макета, чтобы шрифт был доступен на всем сайте.

    Импорт автоматически добавит правила @font-face, необходимые для установки шрифта.

    src/layouts/BaseLayout.astro
    ---
    import '@fontsource/twinkle-star';
    ---

  4. В качестве значения font-family используйте название шрифта, как показано в примере body на странице Fontsource. Это будет работать везде, где вы можете написать CSS в вашем проекте Astro.

    h1 {
      font-family: "Twinkle Star", cursive;
    }

Добавление шрифтов с Tailwind

Заголовок раздела Добавление шрифтов с Tailwind

Если вы используете интеграцию Tailwind, вы можете использовать любой из предыдущих методов на этой странице для установки вашего шрифта, с некоторыми изменениями. Вы можете либо добавить @font-face правило для локального шрифта, либо использовать стратегию импорта Fontsource для установки шрифта.

Чтобы добавить ваш шрифт в Tailwind:

  1. Следуйте любому из приведенных выше руководств, но пропустите последний шаг добавления font-family в CSS.

  2. Добавьте название шрифта в файл tailwind.config.mjs.

    Этот пример добавляет шрифт Inter в стек шрифтов sans-serif, со шрифтами по умолчанию из Tailwind CSS.

    tailwind.config.mjs
    import defaultTheme from 'tailwindcss/defaultTheme'
    

    /** @type {import('tailwindcss').Config} */
    export default {
      content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
      theme: {
        extend: {
          fontFamily: {
            sans: ['Inter', ...defaultTheme.fontFamily.sans],
          },
        },
      },
      plugins: [],
    }

Теперь весь текст sans-serif (по умолчанию в Tailwind) в вашем проекте будет использовать выбранный вами шрифт, а класс font-sans будет также применять шрифт Inter.

Дополнительные сведения см. в Документации Tailwind по добавлению пользовательских шрифтов.

Дополнительные ресурсы

Заголовок раздела Дополнительные ресурсы