🔤 Витрина шрифтов

Демонстрация настроенных шрифтов: Inter для основного текста и JetBrains Mono для кода.

📝 Основной шрифт - Inter

Заголовки разных уровней

Заголовок H1 - Inter 700

Заголовок H2 - Inter 700

Заголовок H3 - Inter 700

Заголовок H4 - Inter 700

Заголовок H5 - Inter 600

Заголовок H6 - Inter 600

Текстовые элементы

Это жирный текст используя Inter 600.

Это курсивный текст используя Inter 400 italic.

Это жирный курсивный текст используя Inter 600 italic.

Обычный текст абзаца использует Inter 400. Этот шрифт специально разработан для интерфейсов и обладает отличной читаемостью на экранах любого размера. Inter оптимизирован для текста малого размера с открытыми формами и высоким x-height.

Цитата также использует Inter. Шрифт хорошо работает в любом контексте.

Списки

• Элемент списка Inter 400
• Жирный элемент Inter 600
• Курсивный элемент Inter 400 italic

1. Нумерованный список
2. Также использует Inter
3. Отличная читаемость

Ссылки

Это ссылка в шрифте Inter с hover-эффектами.

---

💻 Моноширный шрифт - JetBrains Mono

Inline код

Вот примеры inline кода в тексте. Код использует JetBrains Mono и имеет специальные стили:

• const variable = "value"; - JavaScript
• npm install package - команда терминала
• function getName() { return "Inter"; } - функция
• /api/v1/users/{id} - API endpoint

Блоки кода

JavaScript

// JetBrains Mono с лигатурами
const calculateTotal = (items) => {
  return items
    .filter(item => item.active !== false)
    .reduce((sum, item) => sum + item.price, 0);
};

// Стрелочные функции красиво отображаются
const users = await fetch('/api/users')
  .then(response => response.json())
  .catch(error => console.error('Error:', error));

Python

# JetBrains Mono отлично подходит для Python
def fibonacci(n: int) -> int:
    """Вычисляет число Фибоначчи."""
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

# Словари и операторы
user_data = {
    'name': 'John Doe', 
    'age': 30,
    'is_active': True
}

# Lambda функции
numbers = [1, 2, 3, 4, 5]
squared = list(map(lambda x: x ** 2, numbers))

CSS

/* JetBrains Mono в CSS */
.button {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transition: all 0.3s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

JSON

{
  "name": "JetBrains Mono Font Demo",
  "version": "1.0.0", 
  "fonts": {
    "primary": {
      "family": "Inter",
      "weights": [300, 400, 500, 600, 700, 800, 900],
      "source": "Google Fonts"
    },
    "monospace": {
      "family": "JetBrains Mono", 
      "weights": [100, 200, 300, 400, 500, 600, 700, 800],
      "features": ["ligatures", "contextual-alternates"],
      "source": "Google Fonts"
    }
  }
}

Bash/Shell

#!/bin/bash
# JetBrains Mono для скриптов
echo "Setting up fonts..."

# Переменные
FONT_DIR="/usr/share/fonts/truetype"
INTER_URL="https://fonts.google.com/specimen/Inter"
JETBRAINS_URL="https://fonts.google.com/specimen/JetBrains+Mono"

# Функции
install_font() {
    local font_name=$1
    echo "Installing ${font_name}..."
    # Логика установки
}

# Массивы
fonts=("Inter" "JetBrains Mono")
for font in "${fonts[@]}"; do
    install_font "$font"
done

---

🎨 Особенности стилизации

JetBrains Mono Features

Лигатуры и контекстные альтернативы

JetBrains Mono поддерживает лигатуры (font-feature-settings: 'liga' 1) и контекстные альтернативы ('calt' 1), что делает код более читаемым:

• != → ≠
• === → ≡
• <= → ≤
• >= → ≥
• -> → →
• => → ⇒

Современные стили для кода

Улучшения дизайна

• Цветные фоны для inline кода
• Тени и границы для блоков кода
• Градиентные заголовки блоков кода
• Hover-эффекты для кнопок копирования
• Выделение строк с цветными границами

Адаптивность

Мобильная оптимизация

На мобильных устройствах:

• Размер кода: 0.8rem (вместо 0.875rem)
• Компактные отступы
• Уменьшенные border-radius
• Оптимизированные размеры для касания

---

🌙 Темная тема

В темной теме все шрифты адаптируются:

// Код в темной теме тоже выглядит отлично
const themes = {
  light: {
    background: '#f8fafc',
    code: '#4338ca',
    text: '#1f2937'
  },
  dark: {
    background: '#1e293b', 
    code: '#a78bfa',
    text: '#e5e7eb'
  }
};

Важное замечание

В темной теме код имеет пурпурные оттенки для лучшей контрастности!

---

📊 Технические характеристики

Характеристика	Inter	JetBrains Mono
Тип	Sans-serif	Monospace
Веса	300-900	100-800
Источник	Google Fonts	Google Fonts
Лигатуры	❌	✅
Контекстные альтернативы	❌	✅
Оптимизация	UI/экраны	Код/терминал
x-height	Высокий	Средний
Читаемость	Отличная	Отличная

---

🎯 Результат

Итоговая настройка шрифтов

• ✅ Inter как основной шрифт для всего текста
• ✅ JetBrains Mono для всего кода (inline и блоки)
• ✅ Современные стили с тенями, градиентами, borders
• ✅ Полная поддержка темной темы
• ✅ Лигатуры и контекстные альтернативы в коде
• ✅ Адаптивность для мобильных устройств
• ✅ Специальные стили для кода в адмонишенах
• ✅ Hover-эффекты и анимации

Попробуйте скопировать код выше - кнопка копирования тоже стилизована! 📋