Коротка відповідь
middleFaux bold — це штучне підсилення товщини шрифту, яке досягає шляхом накладання двох однакових слідів з невеликим зміщенням. Faux italic створює вигляд курсиву, застосовуючи трансформацію `skew` або змінюючи кут наклону, не використовуючи власний курсивний гліф. Обидва методи швидко підвищують читабельність, але можуть порушити пропорції і не підтримуються у всіх браузерах.
Повне пояснення
-
Що це і навіщо.
- Faux bold/italic – техніки, що дозволяють створити вигляд товщі або нахилу шрифту без використання окремих гліфів. Це корисно, коли потрібен швидкий ефект або обмежено доступ до відповідних шрифтів.
-
Ключові принципи, терміни, інваріанти.
- Для faux bold застосовують
text-shadow,stroke-widthабо дублювання елемента з невеликим зміщенням. Для faux italic використовують CSS‑трансформаціюskew(-10deg)абоtransform: rotate(-5deg). Важливо, що ці методи не змінюють реальний векторний контур шрифту.
- Для faux bold застосовують
-
Як це працює (життєвий цикл, алгоритм).
- При рендерингу браузер спочатку генерує контур шрифту, потім застосовує CSS‑правила. Якщо задано faux bold, браузер накладає другий слід з відступом; при faux italic – застосовує трансформацію до всього блоку.
-
Практика і реалізація (JavaScript/TypeScript/React приклади).
-
<h1 style={{ textShadow: '0 0 2px #000', transform: 'skew(-5deg)' }}>Заголовок</h1> - У React можна створити компонент
FauxTextз пропсамиboldіitalic, що додає відповідні стилі.
-
-
Тестування (Jest, Testing Library, Playwright приклади).
- Перевірити, що елемент має
text-shadowабоtransformчерезgetComputedStyle. У Playwright можна зробити screenshot і порівняти з очікуваним.
- Перевірити, що елемент має
-
Оптимізація продуктивності.
- Faux bold/italic додає лише один рендер, тому вплив мінімальний. Але надмірне використання
text-shadowможе збільшити час рендерингу на мобільних пристроях.
- Faux bold/italic додає лише один рендер, тому вплив мінімальний. Але надмірне використання
-
Accessibility.
- Переконатися, що контрастність залишається достатньою; faux bold не змінює семантику, але може вплинути на читабельність для людей з дислексією.
-
Безпека та валідація.
- Немає безпосередніх ризиків, але слід уникати надмірного використання
transform, яке може викликати анімаційний лаг.
- Немає безпосередніх ризиків, але слід уникати надмірного використання
-
Типові помилки й edge cases.
- Faux italic на шрифтах з вузькими лініями може виглядати «підтягнутим»; faux bold на шрифтах з тонкими лініями може виглядати «переважним».
-
Cheatsheet + можливі follow-up питання.
text-shadow: 0 0 2px #000– faux bold.transform: skew(-5deg)– faux italic.- Follow‑up: Як впливають ці техніки на SEO? Чи підтримуються у всіх браузерах?