Dostosowywanie typografii do preferencji użytkownika za pomocą CSS

Metoda dostosowywania czcionki do haseł użytkowników aby mogli wygodnie czytać Twoje treści.

Adam Argyle

Wciąganie użytkownika w proces projektowania jest dla nich bardzo ekscytujące, dla projektantów i programistów. Użytkownicy mogą łatwo przejść do Twoich usług podczas oglądania treści, a ich preferencje są ściśle wkomponowane w projekt.

W tym poście na blogu omawiamy wykorzystywanie zapytań o media CSS ze zmiennymi czcionkami do dostosowywania czytanie jeszcze bardziej. Możliwość dostosowania stopnia i grubości czcionki z font-variation-settings, co umożliwia mikrodostrajanie przy różnych preferencjach i kontekstów, np. preferencji dotyczących trybu ciemnego lub wysokiego kontrastu. Możemy podjąć te preferencje i dostosować zmienną czcionkę do wygody użytkownika.

• W trybie ciemnym gradacja kolorów jest nieco mniejsza.
• Duży kontrast powoduje pogrubienie czcionki.
• Niski kontrast powoduje, że czcionka jest cieńsza.

Zapoznaj się z instrukcjami, aby zrozumieć poszczególne elementy kodu CSS i czcionki zmiennych, które umożliwiają włączenie ten ważny moment.

Konfiguruję

Aby pomóc nam skupić się na wartościach ustawień CSS i odmian czcionki, można przeczytać i zobaczyć, za pomocą których można wyświetlić podgląd pracy:

<h1>Variable font weight based on contrast preference</h1>

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Officia, quod? Quidem, nemo aliquam, magnam rerum distinctio
  itaque nisi nam, cupiditate dolorum ad sint. Soluta nemo
  labore aliquid ex, dicta corporis.
</p>

Nawet jeśli nie dodasz kodu CSS, rozmiar czcionki będzie dostosowywać się do preferencji użytkownika. Oto film z innej prezentacji, który pokazuje, jak ustawienie wartości font-size w pikselach ściśniaj dowolne preferencje użytkownika i dlaczego warto ustawić rozmiar czcionki w rem:

Na koniec, aby wyśrodkować i wesprzeć prezentację, dodajmy kilka stylów CSS:

@layer demo.support {
  body {
    display: grid;
    place-content: center;
    padding: var(--size-5);
    gap: var(--size-5);
  }

  h1 {
    text-wrap: balance;
  }
}

Ta konfiguracja demonstracyjna pozwoli Ci rozpocząć testowanie i wdrożenie tego przejrzystego interfejsu typograficznego funkcji.

Wczytywanie czcionki zmiennej Roboto Flex

Strategia adaptacyjna wymaga czcionki zmiennej z istotnymi osiami dla W tym celu potrzebujesz: GRAD i wght. Docelowy użytkownik adaptacyjny preferencjami w tym artykule dotyczą schematu kolorów i kontrastu. Oba te czynniki dostosuje te osie do preferencji użytkownika.

Wczytaj czcionkę zmiennej za pomocą interfejsu API @font-face CSS:

@font-face {
  font-family: "Roboto Flex";
  src: url('https://assets.codepen.io/2585/RobotoFlex') format('truetype');
}

Następnie zastosuj czcionkę do wybranych treści. Następująca usługa porównywania cen stosuje ją do: wszystko:

@layer demo.support {
  body {
    font-family: Roboto Flex;
  }
}

Niestandardowe właściwości CSS i zapytania o multimedia zapewniające wygraną

Po załadowaniu czcionki możesz przesłać zapytanie o preferencje użytkownika i dostosować zmienną ustawienia czcionki.

Ustawienia w przypadku braku ustawień (domyślne)

Poniższe style początkowe będą stylami domyślnymi lub innym sposobem wyglądu a także style dla użytkowników bez żadnych preferencji.

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;
  }
}

Ustawienia, gdy preferowany jest wysoki kontrast

Dla użytkowników, którzy preferują wysoki kontrast w swoim systemie zwiększ wartość --base-weight z 400 do 700:

@layer demo {
  @media (prefers-contrast: more) {
    body {
      --base-weight: 700;
    }
  }
}

Zyskaj większy kontrast podczas czytania.

Ustawienia, gdy preferowany jest niski kontrast

Użytkownicy, którzy wyrazili zgodę na niski kontrast w swoim systemie zmniejsz wartość --base-weight z 400 do 200:

@layer demo {
  @media (prefers-contrast: less) {
    body {
      --base-weight: 200;
    }
  }
}

Teraz podczas czytania można zmniejszyć kontrast.

Ustawienia, gdy preferowany jest tryb ciemny

@layer demo {
  @media (prefers-color-scheme: dark) {
    body {
      --base-grade: -25;
    }
  }
}

Teraz różnice dostrzegalne między światłem na ciemnym i ciemnym świetle pod uwagę.

Wszystko w jednym miejscu

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;
  }

  @media (prefers-contrast: more) {
    body {
      --base-weight: 700;
    }
  }

  @media (prefers-contrast: less) {
    body {
      --base-weight: 200;
    }
  }

  @media (prefers-color-scheme: dark) {
    body {
      --base-grade: -25;
    }
  }
}

Albo dla zabawy, korzystając z zagnieżdżania CSS:

@layer demo {
  body {
    --base-weight: 400;
    --base-grade: 0;

    font-variation-settings:
      "wght" var(--base-weight),
      "GRAD" var(--base-grade)
    ;

    @media (prefers-contrast: more)     { --base-weight: 700 }
    @media (prefers-contrast: less)     { --base-weight: 200 }
    @media (prefers-color-scheme: dark) { --base-grade: -25 }
  }
}

W ten sposób powstaje funkcja czytania, która dopasowuje czcionkę do użytkownika. ustawieniach. Pełny kod źródłowy jest dostępny poniżej w Codepen.