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, щоб зберегти читабельність тексту при зміні шрифтів. Це особливо корисно, коли шрифт, який ви використовуєте, має інший x-висоту, ніж стандартний, що може вплинути на розмір тексту. Наприклад, встановлення element.style.fontSizeAdjust = '0.5'; допоможе підтримати читабельний розмір тексту незалежно від шрифту.

автор: Bond правити

Порада

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

if (window.innerWidth < 600) {
  element.style.fontSizeAdjust = '0.58';
}

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.fontSizeAdjust

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	127	3	16.4	113	127	—

Підтримка: мобільні переглядачі

Переглядач
	127	127	4	16.4

Приклади

+ запропонувати свій приклад у пісочниці

<div id="textElement">Демонстраційний елемент</div>

// Отримуємо елемент тексту
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');

<div id="themeElement">Демонстраційний елемент</div>

// Отримуємо елемент тексту
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');

<header>
  <h2 class="title">element.style.fontSizeAdjust</h2>
  <p class="description">Змінює розмір шрифту для покращення читабельності при різних типах шрифтів.</p>
</header>
<main>
  <div class="result">
    <p id="text">Це приклад тексту для демонстрації властивості fontSizeAdjust.</p>
    <div>
      <label for="fontSizeAdjustRange">Корекція розміру шрифту: <span id="adjustValue">1.0</span></label>
      <input type="range" id="fontSizeAdjustRange" min="0.5" max="2.0" step="0.1" value="1.0">
    </div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.result label {
  display: block;
  margin: 10px 0;
}

document.getElementById('fontSizeAdjustRange').addEventListener('input', function (event) {
  const adjustValue = event.target.value;
  const textElement = document.getElementById('text');
  textElement.style.fontSizeAdjust = adjustValue;
  document.getElementById('adjustValue').textContent = adjustValue;
});
//# sourceURL=pen.js