4 кроки до використання змінних шрифтів

Feb 8, 2026

Як

Variable fonts: The outlines of various weights and style of a single font family in magenta, emblazoned with the words 'Get versatile with variable fonts' in a bold, sans serif font.

(Зображення кредиту: майбутнє)

Змінні шрифти Увімкнути дизайнерів шрифтів, щоб визначити варіанти типу в самому шрифту, що дозволяє виконувати один файл шрифту, щоб діяти як декілька шрифтів. Стандартні шрифти згруповані у сім'ї шрифтів, які містять декілька окремих файлів шрифтів, кожен з яких представляє інший стиль, наприклад, легка вага або смілива вага. Змінні шрифти містять всю цю ж інформацію в одному файлі шрифту.

Використовуючи джерело SANS PRO, як приклад, змінна версія шрифту становить приблизно 394KB і поставляється у різноманітних вагах. Якщо ми повинні були використовувати ці шрифти, як індивідуально, як стандартні файли шрифтів, вони в середньому, 234KB кожен, що призводить до комбінованого розміру файлу приблизно 1856кб. Звичайно, цей розрахунок передбачає, що всі ваги шрифту існують окремо як стандартний шрифт, який вони не є. (Хоча якщо ви шукаєте лише звичайні шрифти, перевірте наш пост на Кращі безкоштовні шрифти доступні.)

Якщо ми видаляємо шрифти, які не існують як стандартний шрифт, комбінований розмір файлу все ще три рази перевищує розмір змінного шрифту та значно менше стилів. Навіть якщо ви просто хотіли сміливі та регулярні версії, загальні у багатьох веб-проектах, дві версії стандартного джерела SANS Pro Font ще більше, ніж єдиний змінний шрифт. Те, що це показує, що з змінними шрифтами у нас є потенціал, щоб зробити масові заощадження на пропускну здатність без шкоди для наших конструкцій та творчості.

A comparison of the filesize of a range of font weights between a standard and a variable font – the standard font family totals 1864kb compared to 394kb for the variable font. — Порівняння розмірів файлів діапазону ваг шрифтів між стандартною та змінною версією джерела шрифту SANS PRO (Зображення кредиту: Mandy Michael)

Змінні шрифти працюють шляхом інтерполяції основних варіантів уздовж осі, по суті, побудуючи нові точки між ними. Це означає, що ви могли встановити ваги шрифтів у довільних точках по осі, що представляє набагато більшу кількість стилів та варіантів. Крім того, це тому, що змінні шрифти можуть бути інтерполяровані, що ми можемо анімувати між кожним варіантом, що дозволяє плакати переходи від того, щоб сказати тонну вагу для сміливої ваги - те, що ми ніколи не змогли виконати раніше.

Що робить змінні шрифти, навіть більш захоплююче, полягає в тому, що дизайнери не обмежуються лише однією осью. Змінні шрифти можуть містити багато різних осей, що представляють діапазон різних стилів. Це може включати конденсований, курсивний, оптичний розмір або інші більш творчі або спеціальні параметри.

Хочете розмістити свої шрифти на новому веб-сайті? Для ресурсів веб-дизайну, голова до нашого кращого Веб-будівельник Круглий та вибрати вершину веб хостинг Послуги. Або для оновлення сховища, перевірте їх хмара зберігання Варіанти.

01. Розуміємо осі в змінних шрифтах

A chart showing a single variable font transforming along two axes: weight and width. It ranges from low weight and narrow in the bottom left corner to high weight and thick at the top right. — Дивлячись на інтерполяцію змінного шрифту через вагу та ширину осі показує діапазон налаштувань, який доступний (Зображення кредиту: Mandy Michael)

Використання змінних шрифтів у наших CSS дуже схожий на те, як ми звичайно використовуємо шрифти в Інтернеті: за допомогою @ шрифт-обличчя за правилом . Однак ми спочатку потрібно розуміти різні типи осей всередині змінного шрифту, оскільки це визначає, які властивості CSS ми використовуємо.

У змінному шрифті є два типи осей: зареєстровану вісь та спеціальну вісь. Зареєстрована вісь стосується осі, яка є досить поширеною, щоб вона варто стандартизувати. В даний час є п'ять зареєстрованих осей; Вага, ширина, схильність, курсивний та оптичний розмір, і вони часто відображаються до існуючих властивостей CSS, таких як маса шрифту.

Користувальницькі осей визначаються дизайнерами для друку, можуть бути будь-якими варіаціями, і вимагає лише чотирьох букв ідентифікатора в межах файлу шрифту, який можна назвати в CSS.

02. Використовуйте зареєстровану вісь

A range of variable font weights along an axis from light (200) to black (900). — Ваги варіанти визначаються на осі, від Light (200) до чорного (900) (Зображення кредиту: Mandy Michael)

Коли мова йде про зареєстровану вісь, ми хочемо, щоб переконатися, що ми використовуємо будь-які пов'язані властивості CSS, наприклад, шрифт-вагу або стиль шрифту.

Ми можемо налаштувати наші шрифти за допомогою @ шрифт-обличчя за правилом Як ми, як правило, будемо; Зміна полягає в тому, як ми визначаємо варіації для дескрипторів, таких як шрифт, шрифт-розтягування та стиль шрифту. Раніше ми б встановили масу шрифту 200 і визначили це як легка версія шрифту, ми тоді встановили інший блок Font Fant для сміливої версії та звичайної версії, доки ми не мали жодних ваг, які потрібно було дизайн. З змінними шрифтами нам потрібен лише один шрифт FONT блоку. Таким чином, замість використання декількох екземплярів, ми вказуємо діапазон значень, які відповідають мінімальним та максимальним значенням, які визначаються на осі шрифту.

 @ font-face {
FONT-FARME: "Source Sans Marriage";
SRC: URL ("SAND-SANS-Marriage.Woff") формат ("Woff-Variaations");
Шрифт-вага: 200 700;
}

У цьому прикладі ми встановили масу шрифту від 200 до 700. Після того, як визначено наш діапазон, ми можемо вибрати будь-яку кількість в межах цього діапазону, як наша маса шрифту, наприклад, 658. Важливо, якщо ви встановлюєте діапазон ваги шрифту до 700 і Потім спробуйте визначити вагу 900, навіть якщо шрифт має 900 мас, визначену в його осі, ви не зможете його використовувати. Діапазон визначає, що у вас є доступ до CSS.

03. Налаштування спеціальних осей

Оскільки не існуючі властивості CSS існує при використанні спеціальної осі, нам потрібно скористатися новим властивом CSS, який називається параметрами для змін. Це дозволить нам визначити якомога більше названих та митних осей, як нам потрібно.

 H1 {
Шрифт-Сім'я: "Мій змінний шрифт";
Настройки шрифту-варіації: "ВГГТ" 375, "Inli" 88;
}

У прикладі тут, ВГГт відноситься до зареєстрованої осі ваги, і Inli відноситься до спеціальної осі, яка називається вбудованою, кожен з пов'язаним числом значення, що відповідає точці уздовж осі варіації. Хоча ви можете посилатися на зареєстровану вісь як значення для параметрів відображення шрифтів, рекомендується замість того, щоб використовувати їх властивості CSS.

Щоб забезпечити підтримку у старих браузерах, ми можемо використовувати Fagback Fonts для непідтримуваних браузерів, використовуючи виявлення функцій CSS.

 H1 {
  Шрифт-Сім'я: "Джерело SANS", SANS-Serif;
  маса шрифту: 700;
}

@Supports (налаштування шрифту-варіації: Нормальний) {
h1 {
 Шрифт-Сім'я: "Дековар";
 Настройки шрифту-варіації: "inli" 88;
 }
}

Перевірка підтримки налаштувань настройки Font-Variation, ми можемо включити наші стилі змінних шрифтів всередині підтримки блоку CSS, що забезпечують використання лише у браузерах, які можуть підтримувати змінну шрифти - з нашими стандартними шрифтами, що використовуються в непідтримуваних браузерах.

04. Об'єднати JavaScript та змінні шрифти

A range of As rendered in a variety of font weights and sizes, showing the smooth transitions offered by variable fonts. — Змінними шрифтами дозволяють гладким переходами, скажімо, тонку до сміливої ваги; Це дозволяє створювати гладкі перетворення, використовуючи змінні JavaScript (Зображення кредиту: Mandy Michael)

Ми можемо використовувати JavaScript події для ситуацій, де ми хочемо більше налаштуваного контролю або змінити шрифт на основі подій, які ми не можемо отримати доступ до CSS. Простий приклад буде відповідати нашому масочку шрифту до розміру нашого ViewPort - оскільки ViewPort стає меншим, вага шрифту стає важче.

Для того, щоб створити шкалу рідини, ми повинні вирівняти два набори значень та одиниць - маса шрифту та розмір перегляду. Ми можемо отримати доступ до поточної ширини перегляду, використовуючи Window.innerwidth та створити новий процентний масштаб, перетворивши його на діапазон 0-0.99. Включивши мінімальні та максимальні розміри перегляду, ми можемо контролювати діапазон ефекту.

 var viewportscale =
(Window.innerwidth - MinWindowsize) / (MaxWindowsize - MinWindowsize);

Потім ми визначаємо вагу шрифту на основі нашого розміру перегляду.

 Var FontweightCale = ViewportScale * (MinFontweight - MaxFontweight) + MaxFontweight;

Використовуючи власні властивості CSS, ми можемо використовувати наше значення JavaScript для оновлення ваги шрифту у наших CSS.

 p.style.setproperty ("- вага", fontweigkscale);

Коли це об'єднується в функцію та прикріплюється до Listance Resize, ми можемо оновити вагу шрифту на основі нового розміру вікна.

За допомогою цього основного підходу ми можемо змінити нашу типографію на основі всіх подій та досвіду. Де вигляд широкий ми можемо мати більш детальну; І навпаки, коли це менший і в більш обмеженому просторі, ми можемо подивитися на зменшення ширини шрифту або збільшення ваги, забезпечуючи кращий контроль над нашим змістом та типографікою з точки зору чіткості, зручності та дизайну.

Ти можеш Переглянути код Для цього на Codepen.

Ця стаття була опублікована у випуску 318 сітка , журнал найкращого у світі для веб-дизайнерів та розробників. Підписатися на мережу тут .

Дізнайтеся більше про змінні шрифти при створенні CSS

An image promoting Bianca Berning's talk 'The future of type' at Generate CSS on 26 September. — (Зображення кредиту: Getty / Bianca Berning / Future)

У своїй розмові у створенні CSS, зосереджена конференція CSS для веб-дизайнерів, що відбудеться 26 вересня 2019 року на багатій Mix, London, Bianca Berning буде вивчати, як змінні шрифти можуть створювати нові можливості для письмового слова в традиційних засобах масової інформації, а також нові, занурення досвід, такі як АР, ВР, та змішана реальність.

Якщо ви хочете зловити це та інші чудові переговори, варто залучити свої квитки зараз. Якщо ви захопите свою до 5pm UTC 15 серпня, ви можете заощадити 50 фунтів стерлінгів, сплачуючи лише £ 199 + ПДВ. Купуйте квиток зараз !

Пов'язані статті:

3 способи змінюють тип
Початок роботи з змінними шрифтами в CSS
Перетворити свій тип онлайн за допомогою змінних шрифтів

4 кроки до використання змінних шрифтів

01. Розуміємо осі в змінних шрифтах

02. Використовуйте зареєстровану вісь

03. Налаштування спеціальних осей

04. Об'єднати JavaScript та змінні шрифти

Дізнайтеся більше про змінні шрифти при створенні CSS

Як - Найпопулярніші статті

Дизайнер афінності: Як використовувати інструмент для пера

Як сканувати людину менш ніж за п'ять хвилин

Створіть гнучкий компонент каруселі

Як використовувати Adobe Capture CC

Секрет живопису, як Моне

Створіть ігрове середовище в нереальному двигуні 4

Створіть 3D-одяг з реалістичними складками та складами

Як зробити гнучку стрічкову установку

Категорії