css.in.ua
Підтримати

JS властивість CSSStyleDeclaration.fontSizeAdjust

Загальний опис

element.style.fontSizeAdjust - це властивість CSS, яка дозволяє коригувати розмір шрифту для збереження однакової висоти x-висоти (x-height) тексту незалежно від використовуваного шрифту. Висота x-висоти визначається як висота малих літер, наприклад, букви "x". Ця властивість корисна для забезпечення кращої читабельності тексту при заміні одного шрифту на інший.

Властивість fontSizeAdjust приймає значення від 0 до 1, яке визначає співвідношення x-висоти до розміру шрифту. Значення fontSizeAdjust задається як коефіцієнт, що дозволяє коригувати розмір шрифту так, щоб текст залишався читабельним і виглядав послідовно незалежно від вибраного шрифту.

Щоб використати властивість fontSizeAdjust в JavaScript, потрібно отримати доступ до HTML-елемента і встановити значення цієї властивості через об'єкт style. Нижче наведено приклад використання element.style.fontSizeAdjust.

// Отримуємо елемент за його ID
let myElement = document.getElementById('myElement');

// Змінюємо властивість fontSizeAdjust
myElement.style.fontSizeAdjust = '0.5';

У цьому прикладі ми отримали HTML-елемент з ідентифікатором myElement і встановили для його властивості fontSizeAdjust значення 0.5. Це означає, що висота x-висоти буде складати 50% від розміру шрифту, що допомагає зберігати читабельність тексту незалежно від вибраного шрифту.

Значення властивості fontSizeAdjust можуть змінюватися в залежності від потреби забезпечення читабельності. Наприклад, значення 1 означає, що висота x-висоти дорівнює розміру шрифту, а значення 0 повністю вимикає коригування.

Ще один приклад використання fontSizeAdjust для забезпечення читабельності тексту при динамічній зміні шрифтів:

// Отримуємо елемент за його ID
let textElement = document.getElementById('textElement');

// Функція для зміни шрифту та коригування розміру
function updateFontAndSizeAdjust(fontFamily, sizeAdjust) {
  textElement.style.fontFamily = fontFamily;
  textElement.style.fontSizeAdjust = sizeAdjust;
}

// Застосовуємо новий шрифт та коригування розміру
updateFontAndSizeAdjust('Arial', '0.58');

У цьому прикладі ми створили функцію updateFontAndSizeAdjust, яка змінює шрифт і встановлює значення властивості fontSizeAdjust. Ми викликали цю функцію з параметрами Arial для шрифту і 0.58 для коригування розміру. Це дозволяє динамічно змінювати шрифт і автоматично коригувати розмір шрифту для збереження консистентної висоти x-висоти, що покращує читабельність тексту.

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

Порада:

Комбінуйте font-size-adjust з адаптивним дизайном, щоб забезпечити оптимальний розмір шрифту на різних пристроях. Це може бути корисно для мобільних додатків, де різні шрифти можуть виглядати занадто великими або маленькими. Наприклад:

if (window.innerWidth < 600) {
  element.style.fontSizeAdjust = '0.58';
}
Порада:

Використовуйте font-size-adjust, щоб зберегти читабельність тексту при зміні шрифтів. Це особливо корисно, коли шрифт, який ви використовуєте, має інший x-висоту, ніж стандартний, що може вплинути на розмір тексту. Наприклад, встановлення element.style.fontSizeAdjust = '0.5'; допоможе підтримати читабельний розмір тексту незалежно від шрифту.

Синтаксис

element.style.fontSizeAdjust

Значення

Return

Переглядачі

Переглядач

1

1

3

8

12
Переглядач

4.4

18

4

1
Переглядач

-

-

Приклади


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

У цьому прикладі ми адаптуємо шрифт і коригування його розміру для різних мов. Наприклад, для японської мови ми використовуємо шрифт Meiryo з коригуванням 0.65, а для арабської мови - шрифт Amiri з коригуванням 0.55. Це забезпечує оптимальну читабельність тексту для користувачів, що говорять різними мовами, покращуючи їхній досвід взаємодії з веб-сайтом.

// Отримуємо елемент тексту
let textElement = document.getElementById('textElement');

// Функція для зміни шрифту та коригування розміру для різних мов
function updateFontForLanguage(language) {
  if (language === 'jp') {
    // Для японської мови використовуємо шрифт та коригування розміру
    textElement.style.fontFamily = 'Meiryo';
    textElement.style.fontSizeAdjust = '0.65';
  } else if (language === 'ar') {
    // Для арабської мови використовуємо інший шрифт та коригування
    textElement.style.fontFamily = 'Amiri';
    textElement.style.fontSizeAdjust = '0.55';
  } else {
    // Для інших мов використовуємо стандартні значення
    textElement.style.fontFamily = 'Arial';
    textElement.style.fontSizeAdjust = '0.5';
  }
}

// Застосовуємо шрифт та коригування для японської мови
updateFontForLanguage('jp');

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

// Отримуємо елемент тексту
let themeElement = document.getElementById('themeElement');

// Функція для зміни теми та коригування розміру шрифту
function updateTheme(theme) {
  if (theme === 'dark') {
    // Для темної теми встановлюємо більший шрифт та коригування
    themeElement.style.fontFamily = 'Verdana';
    themeElement.style.fontSizeAdjust = '0.7';
    themeElement.style.backgroundColor = '#333';
    themeElement.style.color = '#fff';
  } else {
    // Для світлої теми використовуємо стандартний шрифт та коригування
    themeElement.style.fontFamily = 'Tahoma';
    themeElement.style.fontSizeAdjust = '0.5';
    themeElement.style.backgroundColor = '#fff';
    themeElement.style.color = '#000';
  }
}

// Застосовуємо темну тему
updateTheme('dark');

Спільнота

Зв'язок