Kebolehcapaian web: Tipografi Bendalir Boleh Diakses

• Pengenalan
• Sebelum semua: saiz fon: 20px - amalan buruk
• Cara membuat teks cecair boleh diakses
• Komponen tipografi dalam 10 minit
• Diinspirasikan oleh

pengenalan

Hari ini saya ingin mengingatkan tentang topik penting - Kebolehcapaian. Ia adalah
yang dipacu komuniti usaha untuk menjadikan kebolehcapaian digital lebih mudah.

Sebahagian kecil topik ini ialah tipografi. Teks sepatutnya kelihatan baik dengan mana-mana saiz fon penyemak imbas.

100%	200%

Sebelum semua: saiz fon: 20px - amalan buruk

Saya tahu, kita semua melakukan itu, ramai orang di internet menggunakannya dalam kursus mereka. Tetapi ia adalah pendekatan yang tidak baik. Berikut ialah satu peraturan mudah jika anda tidak pasti unit mana yang hendak dipilih:

px - elemen bersaiz tetap yang tidak akan berubah, seperti untuk sempadan atau bayang-bayang.

rem - saiz fon untuk menjadikannya boleh diakses oleh pengguna yang telah menukar saiz fon lalai penyemak imbas mereka.

vw / vh - saiz elemen melekat dengan saiz viewport

% - saiz elemen melekat dengan saiz relatif

Cara membuat teks cair yang boleh diakses

Apa yang kita perlukan hanyalah clamp() untuk menjadikannya boleh diakses dan formula untuk
jadikan ia responsif.

1. Pastikan anda menetapkan saiz fon global kepada 16px. Dan ketinggian garisan sekurang-kurangnya 1.2

html {
  font-size: 16px; /* 1 rem */
  line-height: 1.2;
} 

1. Tentukan saiz skrin minimum dan maksimum anda, 320 px - 1920 px dalam kes saya.

2. Tentukan saiz teks anda yang anda ingin miliki pada skrin minimum dan maksimum anda. Dalam contoh saya, saya mempunyai tag h1 jadi saya
   saiz fon ialah 50px dan 90px dengan sewajarnya.

3. Pergi ke https://utopia.fyi/type/calculator dan letakkan nilai anda di sana

1. Tatal ke bawah ke Penjana CSS. Kami memerlukan nilai --step-0

   Copy
   /* @link https://utopia.fyi/type/calculator?c=320,50,1.2,1920,90,1.25,2,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
--step--2: clamp(2.1701rem, 1.8842rem + 1.4299vw, 3.6rem);
--step--1: clamp(2.6042rem, 2.225rem + 1.8958vw, 4.5rem);
--step-0: clamp(3.125rem, 2.625rem + 2.5vw, 5.625rem);
--step-1: clamp(3.75rem, 3.0938rem + 3.2813vw, 7.0313rem);
--step-2: clamp(4.5rem, 3.6422rem + 4.2891vw, 8.7891rem);
}

1. Letakkan pengapit(3.125rem, 2.625rem 2.5vw, 5.625rem); sebagai saiz fon teks anda.

Keputusan :

320px	1920px	1920px(200% zoom)

Anda boleh melihat bahawa dengan 1 baris css teks saya responsif dan boleh diakses untuk penskalaan penyemak imbas juga.

Komponen tipografi dalam 10 minit

Niat saya adalah untuk mencipta komponen Tipografi yang fleksibel secepat dan sefleksibel yang mungkin.

Saya mengambil teks h1 terbesar saya. Pergi ke https://utopia.fyi/type/calculator dan menghasilkan 8 langkah kecil:

Ini ialah saiz teks p, h1-6, span dan label saya

html {
  font-size: 16px; /* 1 rem */
  line-height: 1.2;
} 

Kemudian 5 minit lagi bermain dengan bertindak balas dan Voilà:

Komponen tipografi boleh guna semula saya untuk React

Diinspirasikan oleh

Menggunakan REM Tidak Menjadikan Tapak Web Anda Responsif - Inilah Sebabnya

Tipografi Cecair

Atas ialah kandungan terperinci Kebolehcapaian web: Tipografi Bendalir Boleh Diakses. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!