Кастомизация шрифтов

Около 2 мин

На этой странице вы узнаете, как настроить шрифты темы.

Семейство шрифтов

Для распространенных семейств шрифтов их обычно можно разделить на serif^[1] и sans-serif^[2].

Изменение шрифтов

Тема предоставляет три переменные $font-family, $font-family-heading и $font-family-mono для управления шрифтом в .vuepress/styles/palette.scss.

$font-family: шрифт, используемый для обычного текста
$font-family-heading: шрифт для элементов заголовков
$font-family-mono: шрифт, используемый в блоке кода и встроенных кодах

По умолчанию тема использует шрифт без засечек с обычным текстом.

Используйте Serifs

Если вы предпочитаете шрифты с засечками, вы можете изменить $font-family на нужный вам шрифт.

Следующие семейства шрифтов являются нашим рекомендуемым первым выбором для шрифтов с засечками:

$font-family: 'Georgia, -apple-system, "Nimbus Roman No9 L", sans-serif';

Поскольку разные платформы, разные операционные системы и разные методы установки (тонкая/полная) будут вызывать огромные различия в количестве и типах шрифтов в библиотеке шрифтов, вам следует установить как можно больше шрифтов и убедиться, что резервные шрифты ^[3] существует.

Лучшие практики

Резервный шрифт ^[3:1] может гарантировать, что ваш веб-сайт будет хорошо отображаться в разных операционных системах и на устройствах с установленными разными шрифтами.

Библиотека шрифтов

Вы можете найти больше шрифтов в Google Fontsopen in new window, а также просмотреть и загрузить их онлайн.

Пожалуйста, найдите и выберите нужный шрифт и толщину на веб-странице, затем нажмите кнопку Select справа, чтобы добавить его в список выбора, затем нажмите кнопку в правом верхнем углу, чтобы просмотреть ваши любимые шрифты и получить ссылку Импортируется в файл конфигурации VuePress.

Мы предполагаем, что вы выбрали курсив 400 и 700 шрифта Lora. После нажатия кнопки в правом верхнем углу Google выдаст в сайдбаре следующий код:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;1,700&display=swap"
  rel="stylesheet"
/>

font-family: "Lora", serif;

Затем все, что вам нужно сделать, это импортировать и использовать их, добавив следующий код в файл конфигурации VuePress:

// .vuepress/config.ts
import { defineUserConfig } from "vuepress";

export default defineUserConfig({
  //...

  head: [
    //...

    // Import the corresponding link
    ["link", { rel: "preconnect", href: "https://fonts.googleapis.com" }],
    [
      "link",
      { rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: "" },
    ],
    [
      "link",
      {
        href: "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700&display=swap",
        rel: "stylesheet",
      },
    ],
  ],

  //...
});

Также измените переменную $font-family в файле палитры:

// .vuepress/styles/palette.scss

// apply font
$font-family: "Lora, serif";

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

lora Демо

Принимая во внимание, что признание присущего достоинству

Никто не может быть подвергнут произвольному аресту, задержанию или ссылки.
Каждый имеет право на полное равенство на справедливое и публичное разбирательство дела независимым и беспристрастным судом при рассмотрении его прав и обязанностей и любого уголовного обвинения против него.
Никто не может подвергаться произвольному вмешательству в его частную жизнь, семью, жилище или переписку, а также посягательствам на его честь и репутацию. Каждый имеет право на защиту закона от такого вмешательства или посягательств.

Связанное введение: https://www.zhihu.com/topic/19559432/introopen in new window ↩︎
Связанное введение: https://www.zhihu.com/topic/19559433/introopen in new window ↩︎
Из Википедии
Резервные шрифты — это шрифты, которые используются для отображения отсутствующих символов, когда в отображаемом шрифте отсутствуют определенные символы. Поскольку он служит последней линией защиты для отображения, резервные шрифты должны по возможности содержать все символы Юникода.
Если отсутствующий символ не имеет резервного шрифта для отображения, отсутствующий символ обычно отображается в виде черного квадрата, белого пустого квадрата, вопросительного знака, заполнителя Unicode (U+FFFD) или просто пропускается. На практике такие системы, как CSS, которые поддерживают последовательное отображение списков шрифтов, обычно помещают один или несколько наборов резервных шрифтов в конец списка, чтобы предотвратить пропущенные символы. ↩︎ ↩︎