Tipografi intrinsik adalah masa depan teks gaya di web

Cara teks gaya kita tidak banyak berubah sejak bertahun -tahun. Terdapat banyak kemajuan untuk membantu menjadikan perkara lebih fleksibel, seperti susun atur, tetapi dari segi gaya, aspek yang paling terhingga dari reka bentuk kami, seperti teks, tetap tidak berubah. Ini terutama berlaku mengenai gaya teks. Kami menulis kod kepada teks gaya secara eksplisit untuk setiap bahagian susun atur kami, dan kemudian, untuk menjadikannya responsif, kami menulis lebih banyak kod untuk menjadikannya berfungsi pada setiap titik putus. Ini bermakna, sebagai bahagian yang berbeza dari teks dan berkembang, hasilnya adalah ketegangan - ketegangan, ketegangan pengalaman - sebelum kandungan pecah. Di tempat -tempat ini, kandungan mengalami tidak bersaiz atau jarak yang baik, sementara itu disokong oleh kod yang terlalu rumit dan rapuh.

Tipografi intrinsik mengalihkan semua ini, membersihkannya dengan memulakan kod itu sendiri untuk mempengaruhi gaya. Daripada menulis gaya teks eksplisit, anda menentukan bagaimana gaya -gaya tersebut berubah mengikut perkadaran dengan kawasan teks. Ini membolehkan anda menggunakan komponen teks yang lebih fleksibel dalam variasi susun atur yang lebih banyak. Ia memudahkan kod anda, meningkatkan peluang untuk kemungkinan susun atur baru. Tipografi intrinsik berfungsi supaya teks sendiri menyesuaikan diri dengan kawasan di mana ia diberikan. Daripada teks saiz dan jarak untuk setiap komponen pada setiap titik putus, teks diberi arahan untuk bertindak balas terhadap kawasan yang dimasukkan ke dalam. Akibatnya, tipografi intrinsik membolehkan reka bentuk menjadi lebih fleksibel, menyesuaikan diri dengan kawasan di mana ia diletakkan, dengan kod yang jauh lebih sedikit.

Typographic Superpowers Beyond Clamp ()

Hasil menggunakan tipografi intrinsik jauh melebihi apa yang mungkin dengan alat seperti pengapit (). Gaya tipografi intrinsik menggabungkan komponen mudah alih pertanyaan elemen dengan kawalan interpolasi animasi CSS, yang membolehkan perubahan lancar dari sebarang nilai di seluruh lebar kontena. Teknik ini membolehkan perkara-perkara yang tidak mungkin dengan teknik CSS yang lain, seperti penyesuaian fon variabel, warna, dan ketinggian garis-ketinggian sebagai perubahan kawasan elemen. Anda juga mengelakkan perangkap aksesibiliti pengapit () dan kunci di mana menukar saiz fon lalai penyemak imbas mengalihkan tipografi anda daripada penjajaran dengan titik putus anda apabila menggunakan unit relatif.

Bagaimana ini berbeza dengan tipografi responsif?

Tipografi responsif merujuk pandangan untuk mengubah teks. Ia melakukan ini melalui pertanyaan media, pengapit (), atau kunci CSS. Walaupun teknik ini membolehkan kawalan tipografi granular merentasi saiz skrin, mereka tidak mempunyai keupayaan untuk mengawal tipografi dalam komponen yang berbeza. Ini bermakna, untuk halaman dengan pelbagai kawasan kandungan bersaiz yang berbeza, gaya tajuk baru perlu dibuat untuk setiap bidang ini dengan pendekatan tipografi yang responsif.

Tipografi intrinsik tidak memerlukan semua itu. Dengan tipografi intrinsik, gaya tajuk tunggal boleh digunakan di semua kawasan kandungan yang berbeza. Gaya tajuk diskret boleh disatukan menjadi satu tajuk intrinsik. Ini adalah perbezaan yang serupa dengan pertanyaan elemen berbanding pertanyaan media: dengan pertanyaan elemen mungkin untuk mengikat semua maklumat skala kepada komponen, di mana media pertanyaan gaya sentiasa merujuk pandangan.

Anatomi gaya intrinsik

Sekiranya kita mengambil gaya tajuk intrinsik di atas dan mengeluarkan semua variasi di dalamnya, ia akan kelihatan seperti yang berikut:

Di dalam kawasan yang lebih besar di halaman, teks itu adalah jenis yang lebih besar, lebih berani, dan lebih luas. Di kawasan yang lebih kecil dari halaman teks lebih kecil, lebih ringan, dan sempit. Kawasan di mana tajuk utama diberikan diukur, dan kemudian kepingan yang sesuai diambil dari gaya tajuk intrinsik ini untuk digunakan untuk tajuk tertentu.

Anda mungkin dapat melihat beberapa perkara mengenai bentuk gaya tajuk tersemperit ini. Teks itu menjadi lebih kecil hingga lebih besar, tetapi bentuknya sendiri mempunyai lengkung. Kawalan ini ke atas bagaimana skala teks dari satu titik ke titik yang lain amat berguna kerana skrin menjadi lebih kecil untuk memastikan keterbacaan yang optimum. Di bawah ini anda dapat melihat set gaya yang sama yang digunakan untuk dua lajur teks, satu dengan bentuk melengkung dan satu dengan bentuk linear. Dalam contoh intrinsik melengkung, teks jauh lebih mudah dibaca di lebih banyak tempat, berbanding dengan contoh menggunakan interpolasi linear, di mana teks menjadi terlalu kecil terlalu cepat.

Melalui menggabungkan keupayaan untuk menginterpolasi gaya teks merentasi saiz dan kawasan susun atur serta membentuk bagaimana tetapan tersebut diinterpolasi, tipografi intrinsik memberikan pereka jumlah kawalan yang belum pernah terjadi sebelumnya ke atas bagaimana teks diberikan pada mana -mana skrin atau saiz komponen.

Jenis secara intrinsik

Typetura membangunkan alat untuk menambah fungsi penapisan intrinsik kepada CSS (saya Pencipta.) Alat ini membolehkan gaya tipografi yang diperlukan untuk ditulis, menyuntikkan fleksibiliti di mana sebelum ini tidak ada. Gaya intrinsik disimpan dalam kerangka utama CSS dan perubahan berdasarkan lebar elemen induk. Ini membolehkan interpolasi mana -mana harta animatable merentasi lebar elemen. Untuk merujuk kembali kepada contoh pertanyaan elemen kami, fikirkan pertanyaan elemen interpolasi.

Untuk menubuhkan kerangka utama anda, 0% adalah sama dengan lebar kontena 0px, dan Keyframe 100% adalah lebar kontena maksimum gaya anda akan diliputi. Nilai ini adalah 1600px secara lalai. Bekas boleh ditakrifkan dengan menambahkan typetura kelas ke elemen, dengan elemen akar sebagai bekas lalai. Unsur -unsur kanak -kanak akan digayakan berdasarkan lebar konteks induk, kecuali konteks baru ditakrifkan.

 @KeyFrames Headline {
  0% {
    saiz font: 1rem;
  }
  100% {
    saiz font: 4rem;
  }
}

Untuk melampirkan gaya ini ke elemen anda, gunakan harta tersuai-TT-KEY. Sekarang anda dapat melihat gaya intrinsik pertama anda.

 @KeyFrames Headline {
  0% {
    saiz font: 1rem;
    Talian ketinggian: 1.1;
  }
  100% {
    saiz font: 4rem;
    Talian ketinggian: 1;
  }
}

.headline {
  --TT-KEY: HEADLINE;
}

Untuk membentuk bagaimana skala gaya ini, gunakan harta tersuai-TT-EASE. Harta ini menerima fungsi pelonggaran CSS dan kata kunci. Ini membolehkan anda dengan cepat membawa saiz fon asas anda atau tirus dari skala dan jarak tajuk utama. Di samping itu, kita boleh mengekang julat gaya ini dengan-TT-MAX untuk lebih sesuai dengan kekangan susun atur anda dan apa teks digunakan.

 @KeyFrames Headline {
  0% {
    saiz font: 1rem;
    Talian ketinggian: 1.1;
  }
  100% {
    saiz font: 4rem;
    Talian ketinggian: 1;
  }
}

.headline {
  --TT-KEY: HEADLINE;
  --TT-Max: 600;
  --TT-EASE: mudah keluar;
}

Contoh berikut menunjukkan betapa fleksibel halaman anda apabila semua teks di atasnya didorong oleh gaya tipografi intrinsik; dari akar dokumen dan ke atas. Teks itu boleh beralih dengan lancar dari monitor yang melayani bilik persidangan sepanjang jalan ke saiz jam tangan - semua tanpa pertanyaan media. Gaya teks juga boleh dikongsi dalam modul yang berbeza; Sebagai contoh, tajuk utama di bahagian atas halaman dan tajuk utama di kawasan klik seterusnya semuanya didorong oleh gaya yang sama. Walaupun kecekapan muncul dengan serta -merta di mana -mana saiz laman web, mereka dengan cepat kompaun: tapak yang lebih besar yang anda miliki, semakin banyak kecekapan ini membina.

Lihat pen ini. Di dalamnya, saya telah menambah inspektor gaya intrinsik supaya anda boleh mengklik pada setiap tajuk utama dan melihat saiz yang diberikan. Di dalam pemeriksa, anda juga boleh memanipulasi bentuk gaya intrinsik, dan sempadan atas. Ini membolehkan anda mula melihat kemungkinan gaya tipografi untuk didayakan oleh Typetura.

Tipografi intrinsik adalah masa depan gaya di web

Membakar peraturan reka bentuk ini ke dalam kandungan anda adalah amalan reka bentuk intrinsik, dan membakar peraturan ini ke dalam teks anda adalah amalan tipografi intrinsik. Reka bentuk web intrinsik , yang dicipta oleh Jen Simmons, adalah konsep di mana mutasi reka bentuk biasa dibakar ke dalam fabrik komponen kami. Daripada menyatakan secara jelas gaya setiap kandungan individu, susun atur intrinsik diberikan kekangan reka bentuk dan kandungan kami bertindak balas terhadap persekitarannya, berbanding dengan gaya yang jelas. Pendekatan ini memudahkan asas kod anda dan meningkatkan fleksibiliti reka bentuk anda, kerana komponen mempunyai arahan yang membantu mereka bertindak balas terhadap lebih daripada sekadar pandangan.

Typetura membawa falsafah ini ke dalam gaya teks. Dengan komponen teks menjadi bahan reka bentuk yang paling asas kami, bahan yang digunakan semula dalam hampir setiap komponen, tipografi intrinsik mempunyai kelebihan yang signifikan terhadap metodologi lain. Kelebihan daya tahan reka bentuk, skalabilitas, dan penyederhanaan kod wujud lebih mendalam dalam projek anda dan melanjutkan jangka hayatnya. Skala ke saiz jam tangan atau sehingga saiz TV, dan di mana teks sekali terhad sejauh mana susun atur anda dapat dicapai, ia kini menyokong cita -cita anda.

Atas ialah kandungan terperinci Tipografi intrinsik adalah masa depan teks gaya di web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!