Fon Boleh Ubah untuk Tipografi Dinamik

Adakah anda merasa bosan untuk menjejaki beberapa fail fon untuk pelbagai berat dan gaya? Mencipta fail yang berbeza untuk variasi fon biasa, tebal, condong dan lain-lain boleh mencabar untuk pereka web. Ini merumitkan proses kreatif dan menyumbat aliran kerja mereka. Bagaimana pula dengan menggabungkan semua varian ini ke dalam satu fail?

Di situlah fon berubah-ubah masuk. Fon berubah ialah kemajuan terobosan dalam teknologi fon OpenType yang membenarkan satu fail fon mengandungi berbilang variasi, seperti biasa, tebal dan condong. Ini menunjukkan bahawa pereka hanya perlu bekerja dengan satu fail untuk mengakses semua pelbagai berat, gaya dan lebar yang mereka perlukan. Ciptaan ini memudahkan untuk sentiasa dan mudah mengubah suai ciri seperti berat, lebar dan kecondongan, yang menyelaraskan proses reka bentuk dan memupuk kebebasan kreatif.

Menggunakan fon Kyiv Sans sebagai contoh, artikel ini akan melihat perkaitan fon yang berbeza dalam CSS dan menunjukkan betapa pentingnya kualiti seperti berat dan juga variasi fon bukan standard seperti MIDL. Dengan menggunakan alatan ini, kami akan belajar cara menghasilkan tipografi yang dinamik dan estetik yang menakjubkan dalam CSS.

Pengenalan kepada Fon Boleh Ubah

Seni bina teknologi fon boleh ubah membolehkan pereka bentuk dan pembangun mengawal ciri tipografi ini dengan serta-merta menggunakan CSS, sekali gus membenarkan perubahan tepat agar sesuai dengan keperluan tertentu projek. Ini meningkatkan prestasi web dengan sangat mengurangkan masa muat dan menggantikan banyak fail fon statik dengan satu fail fon boleh ubah.

Dengan tahap fleksibiliti dan ketepatannya yang dahulunya tidak pernah didengari dengan fail fon statik konvensional, fon berubah membentuk perkembangan utama dalam teknologi tipografi. Tidak seperti fon tradisional, yang menuntut fail berasingan untuk setiap gaya dan berat, fon berubah menangkap beberapa gaya dalam satu fail boleh skala. Ini dicapai dengan gaya fon OpenType, yang membenarkan variasi berterusan sepanjang satu atau lebih paksi—seperti berat, lebar dan saiz optik.

Faedah Fon Pembolehubah dalam CSS

Kami akan membimbing anda melalui cara mencipta tipografi CSS yang dinamik dan menyenangkan dari segi estetika menggunakan alatan ini. Mari kita periksa beberapa contoh:

Kecekapan: Dengan menggabungkan beberapa gaya fon ke dalam satu fail, fon berubah-ubah meminimumkan permintaan HTTP, mempercepatkan pemuatan halaman dan kecekapan keseluruhan.

Fleksibiliti: Pereka bentuk boleh mengubah suai tipografi dengan tepat agar sesuai dengan konteks reka bentuk dan pilihan pengguna yang berbeza kerana kawalan terperinci mereka ke atas sifat seperti wght dan sifat tersuai seperti MIDL dan CONT.

Peralihan Lancar: Fon boleh ubah membenarkan perubahan dinamik pada gaya fon, mengelakkan pertukaran mendadak antara fail fon diskret. Hasilnya, peralihan antara gaya fon adalah lancar dan lancar.

Tipografi Responsif: Fon berubah mendayakan tipografi responsif dengan membenarkan pelarasan berdasarkan saiz port pandangan atau parameter lain yang ditentukan pengguna, memastikan kebolehbacaan optimum dan daya tarikan estetik merentas peranti.

Tipografi Dinamik: Fon berubah memberikan perubahan masa nyata bergantung pada interaksi pengguna atau keadaan persekitaran, oleh itu menyokong dinamik, meningkatkan penglibatan pengguna dan menjana pengalaman yang mengasyikkan.

Kebolehaksesan: Rangkaian pilihan tipografi yang lebih luas membolehkan penyesuaian dan pengubahsuaian teks untuk memastikan kebolehbacaan dan kebolehbacaan merentas pelbagai peranti dan pilihan pengguna.

Estetika: Di web, fon berubah-ubah memberi inspirasi kepada idea reka bentuk kreatif dan mencabar sempadan tipografi, membuka peluang baharu untuk ekspresi tipografi dan percubaan.

Skalabiliti: Fon boleh ubah sesuai untuk reka bentuk responsif dan menjamin bahawa teks jelas dan boleh dibaca pada sebarang saiz atau resolusi kerana ia boleh berskala tanpa kehilangan kualiti.

Pengenalan kepada konsep tipografi responsif dan dinamik menggunakan fon berubah-ubah

Reka bentuk web moden membolehkan pereka bentuk mencipta pengalaman tipografi yang lebih fleksibel dan menawan menggunakan tipografi responsif dan dinamik dengan fon yang berubah-ubah, mari kita rungkai idea:

Pembolehubah dalam Fon: Fon pembolehubah ialah fail fon tunggal dengan beberapa variasi muka taip, termasuk ciri berat dan khas MIDL dan CONT. Fon pembolehubah memberikan lebih kebebasan dan kecekapan dalam reka bentuk tipografi berbanding fon konvensional, yang menuntut fail yang berbeza untuk setiap gaya dan membolehkan peralihan cecair antara varian ini.

Tipografi Responsif: Mereka bentuk teks untuk dimuatkan dengan mudah ke dalam banyak saiz skrin, resolusi dan persekitaran tontonan dikenali sebagai tipografi responsif. Daripada komputer meja yang besar kepada telefon bimbit dan segala-galanya di antaranya, ini menjamin kebolehbacaan dan estetika terbaik merentas banyak peranti. Saiz fon dinamik, jarak baris dan perubahan tipografi lain membantu tipografi responsif meningkatkan pengalaman dan kebolehcapaian pengguna.

Tipografi Dinamik: Tipografi dinamik meningkatkan tipografi responsif dengan menggabungkan interaksi dan animasi ke dalam reka bentuk tipografi. JavaScript dan CSS (Cascading Style Sheets) membantu pereka bentuk membangunkan muka taip yang sesuai dengan perubahan kandungan, interaksi pengguna atau tingkah laku menatal. Tipografi dinamik menggunakan komponen seperti wght, MIDL dan CONT untuk menjana daya tarikan visual dan interaktiviti, membimbing perhatian pengguna dan menangkap mereka.

Pereka bentuk mencipta pengalaman tipografi dalam talian yang kaya, serba boleh dan mengasyikkan dengan menggabungkan kaedah tipografi dinamik dan fleksibel dengan fon yang berbeza-beza. Sama ada ia menukar muka taip secara dinamik sebagai tindak balas kepada aktiviti pengguna, menghidupkan elemen teks untuk menyerlahkan maklumat penting atau melaraskan berat dan saiz fon berdasarkan dimensi skrin, pendekatan ini menawarkan banyak peluang untuk kreativiti dan ciptaan dalam reka bentuk digital.

Pelbagai sifat fon Kyiv Sans membolehkan pereka bentuk membuat peralihan tipografi yang menarik dan sempurna. Ini meningkatkan interaksi dan kemesraan pengguna bahan web dengan meningkatkan daya tarikan dan utiliti estetiknya.

Memahami Sifat Font Pembolehubah

Pelbagai muka taip menawarkan pelbagai ciri baharu yang tiada dalam fon statik tradisional. Mengetahui ciri-ciri ini adalah perlu untuk menggunakan potensi penuh muka taip boleh ubah. Ini adalah beberapa yang asas:

Berat (berat): Dengan mengubah beratnya sepanjang paksi berterusan, muka taip berubah-ubah membolehkan peralihan lancar antara beberapa tahap ketebalan. Pereka bentuk boleh menunjukkan julat pemberat dalam satu fail fon, daripada ringan hingga sangat tebal dan, semua titik di antaranya.

Kesan Lapisan Tengah (MIDL): Paksi tersuai ini membolehkan pereka bentuk menukar kesan lapisan tengah dalam muka taip. Ini boleh memberikan teks gaya visual yang tersendiri, serta tahap tambahan kebebasan reka bentuk dan daya cipta.

Kontras (SAMB): Satu lagi paksi tersuai ialah CONT, yang membolehkan kontras fon ditukar. Dengan mengubah kontras secara dinamik bergantung pada keperluan reka bentuk, ini boleh membantu memaksimumkan kebolehbacaan dan daya tarikan visual teks.

Memahami dan menerapkan kualiti ini akan membantu pereka bentuk menghasilkan muka taip yang menarik secara visual. Dengan ciri fon yang pelbagai, Kyiv Sans mempersembahkan pilihan penyesuaian khas yang meningkatkan kebolehgunaan dan penampilan tipografi web.

Gambaran keseluruhan paksi dan variasi tambahan yang tersedia dalam fon berubah-ubah

Di luar pengubahsuaian berat, lebar dan saiz optik konvensional, fon berubah-ubah menyediakan spektrum luas pilihan pemperibadian. Di bawah ialah ringkasan paksi dan varian yang mungkin tersedia:

Beberapa paksi berdaftar yang mungkin digunakan oleh pereka bentuk fon berubah ditakrifkan oleh spesifikasi OpenType:

• Lebar (wdth): Paksi ini mengawal pengembangan mendatar atau pemeluwapan fon, membolehkan pereka bentuk mengubah suai lebar aksara. Dengan melaraskan paksi ini, pereka bentuk boleh mencipta fon yang kelihatan lebih sempit atau lebih lebar tanpa mengubah ketinggian keseluruhan, membenarkan julat fleksibel gaya pekat kepada lanjutan.

• Slant (slnt): Paksi ini membenarkan pereka bentuk menggunakan condong seperti condong pada aksara tanpa mengubah struktur bentuk huruf. Paksi serong biasanya meniru kesan italik tradisional tetapi mengekalkan bentuk huruf tegak, menjadikannya berguna untuk mencipta variasi gaya.

• Italik (ital): Paksi condong bertukar antara versi tegak dan condong muka taip. Tidak seperti paksi condong, yang hanya mencondongkan aksara, paksi condong melibatkan reka bentuk semula lengkap aksara untuk mencerminkan sifat kursif condong sebenar, memberikan gaya condong yang lebih tulen.

• Saiz Optik (opsz): Paksi ini melaraskan reka bentuk fon untuk mengoptimumkan kebolehbacaan pada saiz yang berbeza. Contohnya, saiz yang lebih kecil mungkin menampilkan pukulan yang lebih tebal dan pembilang yang lebih terbuka untuk kebolehbacaan yang lebih baik, manakala saiz yang lebih besar boleh menjadi lebih halus dan halus. Paksi ini amat berguna untuk tipografi responsif merentas pelbagai media.

• Gred (GRAD): Paksi gred membenarkan pelarasan halus pada berat lejang fon tanpa menjejaskan jarak keseluruhan. Ia berguna untuk meningkatkan kebolehbacaan dalam persekitaran cetakan atau skrin yang berbeza, di mana peningkatan atau penurunan sedikit berat boleh meningkatkan kontras dan kejelasan.

• Kontras (CNTR): Paksi ini mengubah suai kontras antara sapuan tebal dan nipis dalam fon. Dengan melaraskan kontras, pereka bentuk boleh mencipta fon dengan pelbagai tahap penekanan dan kesan visual, daripada kontras rendah, gaya humanis kepada kontras tinggi, reka bentuk moden.

• X-height (xhgt): Paksi ini melaraskan ketinggian huruf kecil berhubung dengan huruf besar fon. Menambahkan ketinggian x boleh meningkatkan kebolehbacaan pada saiz kecil atau mencipta penampilan yang lebih moden sambil mengurangkannya boleh menimbulkan rasa yang lebih tradisional atau formal.

Selain daripada paksi berdaftar, pencipta fon berubah boleh menentukan paksi tersuai mereka sendiri. Mengenai Kyiv Sans: ini terdiri daripada:

• Kesan Lapisan Tengah (MIDL): Paksi tersuai ini memberikan pereka bentuk lebih serba boleh reka bentuk dan membolehkan mereka menukar kesan lapisan tengah tertentu di dalam muka taip, dengan itu menambahkan aspek gaya asal.

• Kontras (SAMB): Paksi tersuai ini membantu mengawal kontras antara sapuan tebal dan nipis dalam bentuk huruf. Pereka bentuk boleh menukar ciri ini secara dinamik untuk mencapai pelbagai darjah ekspresi tipografi, daripada kontras yang lemah kepada varian yang lebih jelas.

Selain daripada paksi berdaftar, pilihan untuk membina paksi baharu membolehkan pereka bentuk fon mencapai tahap penyesuaian yang tinggi dan kawalan canggih ke atas penampilan dan ciri fon. Paksi tersuai seperti MIDL dan CONT, misalnya, membolehkan pereka bentuk menyesuaikan kualiti istimewa fon, menghasilkan tipografi yang fleksibel dan ekspresif. Penyesuaian ini, digabungkan dengan pendaftaran fon berubah, menawarkan pelbagai cara untuk mencipta kesan tipografi yang pelbagai. Contohnya, paksi Kesan Lapisan Tengah (MIDL) membolehkan pereka bentuk mengubah lapisan tengah yang unik dalam muka taip, menambah kualiti visual tersendiri yang meningkatkan kebebasan artistik. Paksi Kontras (CONT) pula mengawal variasi antara sapuan tebal dan nipis, membenarkan pelarasan dinamik yang berjulat daripada kontras halus hingga jelas. Dengan berinteraksi dengan paksi seperti Weight dan Middle Layer Effect, pereka bentuk boleh mencipta teks dengan ketebalan yang berbeza-beza dan gaya unik, mencapai kawalan tepat ke atas penampilan muka taip. Begitu juga, menggabungkan variasi dalam Berat dan Kontras membolehkan penciptaan teks dengan darjah keberanian dan kontras strok yang berbeza, mengimbangi kesan visual dengan kebolehbacaan. Contoh-contoh ini menunjukkan kebebasan yang tiada tandingan yang diberikan oleh kedua-dua paksi berdaftar dan tersuai, memperkasakan pereka bentuk untuk menyelaraskan muka taip dengan keutamaan estetik dan objektif reka bentuk khusus mereka.

Melaksanakan Fon Pembolehubah dalam CSS

Sekarang anda terpesona dengan kemungkinan fon boleh tukar, mari kita siasat cara menggunakannya dalam projek web berasaskan CSS. CSS menawarkan cara untuk menggunakan keupayaan muka taip yang boleh disesuaikan ini dengan betul. Tentukan fon dahulu dengan @font-face, yang membolehkan anda menyediakan fail fon yang berbeza-beza dan ciri-cirinya. Setelah fon ditetapkan, anda boleh menukar paksi fon secara dinamik menggunakan atribut CSS yang berbeza, sekali gus memaksimumkan kemungkinan yang disediakan oleh fon yang berbeza-beza.

Mendapatkan fon

Pertama, kita mesti memuat turun fon berubah yang kita mahu untuk projek kita.
Beberapa laman web di internet membenarkan kami mengakses pelbagai fail fon. Beberapa laman web fon yang paling kerap digunakan adalah seperti berikut:

• Taip Rangkaian
• Font Tupai
• Font Adobe 
• Fon Spring
• Fon Google
• Vfonts.com

Untuk contoh ini, kami akan pergi ke Vfonts.com untuk memuat turun fon pembolehubah Kyiv Sans kami. Format fail ttf atau woff2 berfungsi dengan baik, tetapi kami akan menggunakan ttf dalam demonstrasi ini. Jika anda perlu menukar fail fon anda daripada ttf kepada woff2, kemudian pergi ke everythingfonts.com:

Tangkapan skrin di atas menunjukkan perkara yang anda akan lihat apabila anda tiba di Vfont.

Kami membahagikan projek kepada langkah-langkah berikut:

1. Navigasi ke vfont: Lawati tapak web di mana sumber fon berubah tersedia.

2. Pilih Jenis Kyiv*: Pilih fon Jenis Kyiv*, yang akan mengubah hala anda ke Behance.net tempat fon dihoskan.

3. Akses Pautan Muat Turun: Pada halaman Behance, tatal ke bawah untuk mencari pautan untuk memuat turun fon.

4. Muat turun dari Google Drive: Klik pada pautan muat turun, yang akan membawa anda ke folder Google Drive. Muat turun fail fon dari sana.

5. Nyahzip Fail: Selepas memuat turun, nyahzip fail untuk mengakses kandungannya.

6. Semak Pilihan Fon: Folder yang dinyahzip mengandungi beberapa pilihan untuk dipilih.

   • Ikon
   • Tiada pembolehubah
   • Pembolehubah

7. Pilih fon berubah: Fokus pada fail yang termasuk fon berubah.

   • Serif
   • Mencondongkan
   • Sans

8. Gunakan Font Sans: Sediakan dan gunakan versi Sans fon. Ambil perhatian bahawa fail berat fon Sans ialah 360 KB, yang bersamaan dengan menggunakan lapan fail fon bukan pembolehubah.

9. Nilai tukar ganti: Pertimbangkan sama ada penggunaan fon berubah berbaloi untuk projek anda. Jika anda hanya memerlukan gaya biasa, tebal dan condong, anda mungkin tidak perlu menggunakan fon berubah. Walau bagaimanapun, jika anda memerlukan kawalan lanjutan ke atas variasi, fon berubah boleh menjadi sangat bermanfaat.

Nota: Fail di atas ini dalam format TTF.

Sekarang kita akan menuju ke VSCode, di mana kita akan menggunakan projek vanilla vite.
Untuk mula bekerja pada projek itu, anda mesti memasang pakej yang diperlukan. Anda perlu ikut langkah di bawah:

1. Buka terminal baharu.

2. Jalankan arahan
   

   npm create vite@latest
   

3. Namakan projek anda.

4. Namakan pakej anda.

5. Pilih rangka kerja Vanila.

6. Pilih varian JavaScript.

7. Menjalankan pemasangan npm akan membantu anda berunding ke dalam projek dan memasang modul yang diperlukan.

8. Selepas menyediakan kebergantungan, gunakan arahan berikut untuk melancarkan aplikasi:
   

   npm run dev
   

9. Lawati http://localhost:your-port-number untuk mengakses program yang sedang berjalan pada penyemak imbas anda.

Setelah kami menyelesaikan projek kami, kami akan mempunyai banyak kod olok-olok yang boleh kami ubah suai untuk membina aplikasi yang kami maksudkan. Fon pembolehubah yang dimuat turun hendaklah digugurkan ke dalam folder fon, yang akan digugurkan dalam folder awam. Kami akan menggantikan semua kod olok-olok yang tidak diperlukan dalam style.css, main.js,  dan index.html.

Kod index.html sepatutnya kelihatan seperti ini:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Variable font</title>
  </head>
  <body>
    <div>



<p>From the code above, we're setting up a simple HTML wrapper for our project where the JavaScript will render content in the <div>

<p>The main.js code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">import "./style.css";

document.querySelector("#app").innerHTML = `
  <div>
    <h1>



<p>This is where we use document.querySelector() to add content to the element we insert our content into using the id: #</p>

<p>And the style.css code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">body {
  font-family: 'Kyiv Sans';
}

@font-face {
  font-family: 'Kyiv Sans';
  src: url('/font/KyivTypeSans-VarGX.ttf');
  font-weight: 0 1000;
  font-display: swap;
}

h1 {
  color: #bd0c0c;
  height: 100vh;
  display: grid;
  place-content: center;
  margin: 0;
  text-align: center;
}

.variable-font {
  font-family: 'Kyiv Sans';
  font-size: 5rem;
  line-height: 1.1;
  font-weight: 100;
  font-variation-settings:
   'wght' 100, 'CONT' 250, 'MIDL' 0;
  transition: font-variation-settings 500ms;  
}

.variable-font:hover {
  font-weight: 1000;
  font-variation-settings:
    'wght' 1000, 'CONT' 250, 'MIDL' -1000;
}

Sekarang, mari jelaskan perkara yang berlaku dalam kod di atas:

Menetapkan Fon Lalai untuk Badan:

npm create vite@latest

• Tujuan: Ini menetapkan fon lalai untuk keseluruhan dokumen kepada 'Kyiv Sans'.
• Kesan: Semua elemen teks dalam kandungan akan mewarisi fon ini melainkan digantikan oleh gaya yang lebih khusus.

Mentakrifkan Fon Tersuai:

npm run dev

• Tujuan: Peraturan @font-face membolehkan anda menentukan fon tersuai.
• Nama Fon: Fon dinamakan 'Kyiv Sans'.
• Sumber: Fail fon terletak di /font/KyivTypeSans-VarGX.ttf.
• Julat Berat Fon: Fon ini menyokong julat berat dari 0 hingga 1000, menjadikannya fon berubah-ubah.
• Paparan Fon: swap memastikan teks dipaparkan serta-merta menggunakan fon sandaran sehingga fon tersuai dimuatkan.

Menggayakan

Elemen:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Variable font</title>
  </head>
  <body>
    <div>



<p>From the code above, we're setting up a simple HTML wrapper for our project where the JavaScript will render content in the <div>

<p>The main.js code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">import "./style.css";

document.querySelector("#app").innerHTML = `
  <div>
    <h1>



<p>This is where we use document.querySelector() to add content to the element we insert our content into using the id: #</p>

<p>And the style.css code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">body {
  font-family: 'Kyiv Sans';
}

@font-face {
  font-family: 'Kyiv Sans';
  src: url('/font/KyivTypeSans-VarGX.ttf');
  font-weight: 0 1000;
  font-display: swap;
}

h1 {
  color: #bd0c0c;
  height: 100vh;
  display: grid;
  place-content: center;
  margin: 0;
  text-align: center;
}

.variable-font {
  font-family: 'Kyiv Sans';
  font-size: 5rem;
  line-height: 1.1;
  font-weight: 100;
  font-variation-settings:
   'wght' 100, 'CONT' 250, 'MIDL' 0;
  transition: font-variation-settings 500ms;  
}

.variable-font:hover {
  font-weight: 1000;
  font-variation-settings:
    'wght' 1000, 'CONT' 250, 'MIDL' -1000;
}

• Warna: Menetapkan warna teks kepada #bd0c0c, warna merah.
• Ketinggian: Ketinggian ditetapkan kepada 100vh, menjadikan

  elemen menjangkau ketinggian penuh port pandangan.

  Paparan: grid digunakan untuk reka letak, membenarkan penggunaan sifat grid.

  Memusatkan Kandungan: tempat-kandungan: tengah memusatkan kandungan secara menegak dan mendatar.

  Margin: Margin ditetapkan kepada 0 untuk mengalih keluar sebarang jarak lalai di sekeliling

  .

  Penjajaran Teks: Teks dipusatkan secara mendatar.

  Menggayakan Kelas .variable-font:
  

  body {
    font-family: 'Kyiv Sans';
  }
  

  • Font Family: Menggunakan 'Kyiv Sans' untuk teks.
  • Saiz Fon: Menetapkan saiz fon kepada 5rem (berbanding saiz fon elemen akar).
  • Ketinggian Garisan: 1.1 memastikan jarak yang sedikit antara baris.
  • Berat Fon: Pada mulanya ditetapkan kepada 100.
  • Tetapan Variasi Fon: Menggunakan tetapan variasi tersuai untuk fon berubah:
    • 'wght' mengawal berat (pada mulanya 100).
    • 'CONT' dan 'MIDL' ialah paksi tersuai untuk fon ini, yang pada mulanya ditetapkan kepada 250 dan 0, masing-masing.
  • Peralihan: Peralihan tetapan variasi fon dengan lancar melebihi 500 milisaat.

  Menambahkan Kesan Hover untuk .variable-font:
  

  npm create vite@latest
  

  • Berat Fon pada Tuding: Bertukar kepada 1000 apabila elemen itu dilegarkan.
  • Tetapan Variasi Fon pada Tuding: Mengemas kini tetapan variasi kepada:
    • 'wght' kepada 1000
    • 'CONT' kekal 250
    • 'MIDL' berubah kepada -1000
  • Kesan: Mencipta kesan visual yang dinamik dan interaktif apabila pengguna melayang di atas teks, menyerlahkan fleksibiliti fon berubah.

  Pada penghujungnya kami akan mempunyai Keputusan kami kelihatan seperti ini;
  

  Mencipta Tipografi Responsif dengan Fon Boleh Ubah

  Dengan membenarkan pereka bentuk mencapai penyesuaian sempurna merentas banyak peranti dan saiz skrin, tipografi responsif dengan pelbagai fon mengubah reka bentuk dalam talian. Fleksibiliti yang tidak dapat ditandingi datang daripada fon berubah-ubah, yang membenarkan perubahan berterusan dalam atribut fon termasuk berat, lebar dan kontras dalam satu fail fon. Pereka bentuk boleh menukar atribut fon ini secara dinamik untuk meningkatkan kebolehbacaan dan daya tarikan estetik menggunakan CSS dan pertanyaan media, memastikan teks kelihatan terbaik pada mana-mana peranti, daripada monitor desktop hingga telefon bimbit. Oleh kerana satu fon berubah boleh menggantikan beberapa fail fon pegun, ia mengurangkan keperluan untuk memuatkan fon yang meluas dan meningkatkan prestasi tapak web. Fleksibiliti ini bukan sahaja meningkatkan pengalaman pengguna tetapi juga menyelaraskan proses reka bentuk. Tanpa tipografi responsif—yang menjadi lebih menarik, cekap dan boleh diakses dengan fon yang berbeza—reka bentuk web moden tidak boleh wujud.

  Pertanyaan Media: Sarjana Adaptasi Saiz Skrin

  Pertanyaan media ialah asas reka bentuk web responsif, bertindak sebagai mahir dalam penyesuaian saiz skrin. Berdasarkan ciri peranti pengguna—seperti lebar skrin, ketinggian, peleraian dan orientasi—mereka membenarkan pereka bentuk menggunakan gaya CSS tertentu. Carian media membantu pereka bentuk memastikan tapak web kelihatan dan beroperasi sebaik mungkin merentas pelbagai peranti, daripada komputer riba dan monitor desktop kepada telefon pintar dan tablet.

  Kuasa pertanyaan media terletak pada kapasiti mereka untuk menghasilkan susun atur yang fleksibel dan cair yang sesuai dengan pelbagai saiz skrin. Pertanyaan media membenarkan pereka bentuk menukar saiz fon, mengubah reka letak grid, dan juga menyembunyikan atau menunjukkan item tertentu berdasarkan ukuran port pandangan. Ini memastikan bahan mengekalkan daya tarikan dan kebolehcapaian estetiknya, tanpa mengira peranti yang digunakan.

  Pertanyaan media mentakrifkan titik putus—tempat tertentu di mana reka letak dilaraskan agar muat pada saiz skrin yang berbeza-beza. Menyasarkan peranti yang berbeza, titik putus ini ditetapkan menggunakan lebar min, lebar maks dan ciri CSS yang lain. Sebagai contoh, pertanyaan media mungkin menentukan penggunaan reka letak mesra mudah alih untuk lebar skrin 768 piksel atau kurang dan reka letak yang berbeza untuk paparan yang lebih besar.

  Menggabungkan carian media ke dalam reka bentuk web meningkatkan kebolehcapaian dan pengalaman pengguna. Pada semua platform, pertanyaan media membantu dalam membangunkan pengalaman digital inklusif dengan menjamin bahawa teks boleh dibaca, navigasi adalah intuitif dan bahan disusun dengan baik. Mana-mana pereka web yang ingin mencipta tapak web yang responsif, boleh disesuaikan dan mesra pengguna mesti terlebih dahulu mempelajari pertanyaan media dalam era penggunaan peranti yang pelbagai.

  Ini contohnya:
  

  npm create vite@latest
  

  Dalam contoh ini, kami menggunakan pertanyaan media untuk melaraskan tetapan variasi fon dan berat fon kami berdasarkan saiz skrin. Untuk peranti dengan lebar maksimum 600px, saiz fon dikurangkan kepada 3rem. Berat dan variasi lain dilaraskan sewajarnya untuk :kesan hover, Untuk peranti dengan lebar antara 601px dan 1200px, saiz fon ditetapkan kepada 4rem, dengan berat dan variasi yang dilaraskan. Untuk peranti dengan lebar 1201px dan ke atas, saiz fon ialah 5rem, mengekalkan tetapan asal.
  Pertanyaan media ini memastikan fon menyesuaikan dengan saiz skrin yang berbeza, meningkatkan kebolehbacaan dan pengalaman pengguna merentas pelbagai peranti.

  

  Imej di atas menunjukkan paparan untuk Skrin kecil

  

  Imej di atas menunjukkan paparan untuk skrin Sederhana

  

  Imej di atas menunjukkan paparan untuk Skrin Besar

  Unit Viewport: Membuat Reka Letak Bendalir

  Unit viewport ialah alat yang berkuasa dalam reka bentuk web moden, membolehkan penciptaan reka letak yang lancar dan responsif yang menyesuaikan dengan lancar kepada saiz skrin yang berbeza. Unit viewport termasuk vw (lebar viewport) dan vh (viewport height), yang relatif kepada dimensi viewport penyemak imbas. Satu vw bersamaan dengan 1% daripada lebar viewport dan satu vh sama dengan 1% ketinggian viewport. Unit ini membantu pereka bentuk menjamin bahawa elemen berskala mengikut saiz skrin pengguna, oleh itu menghasilkan reka bentuk yang lebih dinamik dan boleh disesuaikan. Menetapkan saiz fon, pelapik atau jidar dalam unit port pandang, contohnya, membolehkan teks dan objek diubah saiz secara automatik, oleh itu mengekalkan rupa yang konsisten pada beberapa peranti. Kebolehsuaian ini meningkatkan pengalaman pengguna dengan memastikan kandungan kekal boleh dibaca dan menyenangkan dari segi estetika, tanpa mengira paparan tapak pada monitor desktop yang besar atau skrin mudah alih yang kecil. Unit viewport membolehkan pereka bentuk membuat reka letak yang boleh disesuaikan yang bergerak dengan mudah agar sesuai dengan rupa bumi alat digital yang sentiasa berubah.

  Berikut ialah contoh cara menggunakan vw untuk melaraskan saiz fon berdasarkan lebar viewport:
  

  npm create vite@latest
  

  Dalam contoh ini, daripada kod di atas, sifat saiz fon .variable-font ditetapkan menggunakan unit vw lebar port pandangan, menjadikan saiz teks responsif kepada lebar port pandangan.

  Kami boleh menggabungkan carian media dan unit port pandang dengan ciri fon yang berbeza-beza untuk mencipta tipografi yang benar-benar responsif yang sesuai dengan setiap peranti atau saiz skrin dengan elegan. Ini membolehkan kami memberikan pengalaman pengguna yang luar biasa, bebas daripada kaedah akses yang dipilih seseorang untuk tapak web kami.

  Kesan Tipografi Lanjutan dengan Fon Boleh Ubah

  Fon boleh ubah membolehkan pereka bentuk mencipta gaya teks yang sangat disesuaikan dan dinamik dengan membuka bidang baharu kesan tipografi yang kompleks. Pereka bentuk kini boleh mencipta peralihan lancar dan kesan visual luar biasa yang sebelum ini sukar dengan fon pegun dengan melaraskan ciri-ciri seperti berat, lebar dan paksi tersuai secara berterusan. Berat, kontras dan garis tengah secara dinamik boleh diubah dengan melaraskan fon, menawarkan kawalan kompleks ke atas rupa teks. Kebolehsuaian ini sangat kuat dalam reka bentuk responsif, di mana muka taip boleh disesuaikan dengan mudah kepada pelbagai saiz dan orientasi skrin. Selain itu, animasi interaktif membenarkan teks bertindak balas kepada tindakan pengguna seperti melayang atau mengklik, menghasilkan pertemuan yang menarik dan mengasyikkan. Unit viewport, digabungkan dengan ciri fon yang berbeza-beza, memastikan tipografi kekal lancar dan berskala, meningkatkan kebolehbacaan dan penampilan pada semua jenis peranti. Menggunakan ciri canggih ini, pereka boleh mencipta bahan digital yang menarik secara visual dengan meluaskan kemungkinan tipografi konvensional. Mari terokai beberapa kaedah menarik untuk meregangkan sempadan tipografi dalam talian:

  Tipografi Bendalir

  Tipografi cecair ialah kaedah reka bentuk yang menggunakan skala teks secara dinamik dengan saiz port pandangan, oleh itu menawarkan pengalaman membaca yang lancar dan responsif merentas banyak peranti. Unit viewport, carian media dan fon boleh tukar membolehkan tipografi cair memastikan teks kekal mudah difahami dan seimbang secara visual, bebas daripada saiz skrin. Kaedah ini menghapuskan keperluan untuk saiz fon tetap dan membolehkan perubahan lancar, dengan itu meningkatkan kebolehbacaan dan penampilan dengan cara yang sesuai dengan keadaan paparan yang sangat berbeza.

  Ini contohnya:
  

  npm run dev
  

  Cara ia berfungsi:

  Fungsi calc(): Fungsi ini menjana kesan penskalaan bendalir dengan menggabungkan unit relatif vw, dengan nilai tetap rem. saiz fon, contohnya, calc(2rem 2vw) bertindak balas kepada lebar port pandangan dan memastikan saiz asas.

  Tipografi Bendalir untuk Pelbagai Elemen: Banyak elemen seperti teks jaminan h1, h2 dan p berskala sesuai merentas peranti menggunakan taipografi bendalir. Fungsi calc() menyediakan saiz asas dengan faktor penskalaan yang berubah mengikut lebar port pandangan.

  Fon Boleh Ubah: Dengan menggabungkan tipografi cecair dengan fon boleh tukar, anda boleh mencapai perubahan dinamik dalam atribut teks bergantung pada saiz port pandangan.
  Kaedah ini menjamin bahawa teks kekal estetik dan boleh dibaca merentas spektrum besar peranti dan saiz skrin.

  Dengan menganimasikan teks, tipografi kinetik memberikannya kehidupan dan menjana kesan visual yang menarik dan dinamik yang memikat penonton. Kaedah ini menambah gerakan dan interaksi dengan menukar atribut teks menggunakan animasi JavaScript dan CSS. Menggunakan kesan :hover untuk menghidupkan berat fon dalam contoh kami dengan fon berubah, kami menunjukkan tipografi kinetik—iaitu, dengan lancar daripada pemberat yang lebih ringan kepada yang lebih berani. Ini bukan sahaja menekankan kandungan tetapi juga menunjukkan bagaimana, dengan perubahan masa nyata yang cair, pelbagai fon boleh meningkatkan interaksi pengguna. Tipografi kinetik membolehkan pereka bentuk meningkatkan daya tarikan visual dan kebolehgunaan teks mereka, meningkatkan peranan asasnya dalam persekitaran digital yang interaktif dan menarik.

  Contoh: Animating Weight on Hover

  npm create vite@latest
  

  Di sini, kami menggunakan peralihan yang lancar untuk menghidupkan berat elemen .variable-font daripada 100 biasa kepada 1000 tebal pada :hover, mencipta kesan yang halus namun memberi kesan.

  Ini hanyalah segelintir peluang imaginatif yang ditawarkan oleh fon yang berbeza. Daripada animasi dinamik kepada susun atur bendalir, terdapat banyak peluang untuk muka taip yang tersendiri dan menarik. Dengan sedikit daya cipta dan pemahaman CSS, kami boleh mencabar norma reka bentuk web dan menghasilkan pengalaman pengguna yang agak luar biasa.

  Kesimpulan

  Fon boleh ubah—ditunjukkan paling baik oleh Kyiv Sans mengubah tipografi di web dengan mengumpulkan beberapa gaya fon ke dalam satu fail. Dengan mengurangkan bilangan pertanyaan HTTP, ciptaan ini memudahkan proses, meningkatkan fleksibiliti reka bentuk dan meningkatkan prestasi. Pereka bentuk boleh menggunakan sepenuhnya fon boleh tukar dalam CSS untuk menghasilkan muka taip dinamik responsif yang sesuai dengan sempurna dengan pelbagai saiz skrin dan interaksi pengguna.
  Pereka bentuk boleh mencipta pengalaman tipografi yang menarik secara visual dan mudah diakses menggunakan atribut seperti berat, kesan lapisan tengah dan kontras, serta pendekatan responsif seperti pertanyaan media dan unit port pandangan. Fon boleh ubah ialah alat yang diperlukan untuk reka bentuk web kontemporari kerana kecairannya membolehkan arah baharu untuk ekspresi artistik.

  Sumber

  • Lihat pratonton langsung yang dihoskan di Netlify
  • Lihat kod Sumber

  Rujukan

  • fon boleh ubah
  • OpenType
  • Kyiv Sans
  • port pandangan
  • muka taip
  • paksi berdaftar
  • paksi tersuai
  • @font-face
  • Taip Rangkaian
  • Font Tupai
  • Font Adobe 
  • Fon Spring
  • Fon Google
  • Vfonts.com
  • ttf
  • woff2
  • everythingfonts.com
  • Behance.net
  • pertanyaan media
  • px
  • rem
  • vw
  • vh
  • calc()

  Atas ialah kandungan terperinci Fon Boleh Ubah untuk Tipografi Dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!