From the code above, we're setting up a simple HTML wrapper for our project where the JavaScript will render content in the
The main.js code should look something like this:
\n<\/p>\n\n
import \".\/style.css\";\n\ndocument.querySelector(\"#app\").innerHTML = `\n\n\n\n\n\n
This is where we use document.querySelector() to add content to the element we insert our content into using the id: #<\/p>\n\n
And the style.css code should look something like this:
\n<\/p>\n\nbody {\n font-family: 'Kyiv Sans';\n}\n\n@font-face {\n font-family: 'Kyiv Sans';\n src: url('\/font\/KyivTypeSans-VarGX.ttf');\n font-weight: 0 1000;\n font-display: swap;\n}\n\nh1 {\n color: #bd0c0c;\n height: 100vh;\n display: grid;\n place-content: center;\n margin: 0;\n text-align: center;\n}\n\n.variable-font {\n font-family: 'Kyiv Sans';\n font-size: 5rem;\n line-height: 1.1;\n font-weight: 100;\n font-variation-settings:\n 'wght' 100, 'CONT' 250, 'MIDL' 0;\n transition: font-variation-settings 500ms; \n}\n\n.variable-font:hover {\n font-weight: 1000;\n font-variation-settings:\n 'wght' 1000, 'CONT' 250, 'MIDL' -1000;\n}\n<\/pre>\n\n\n\nSekarang, mari jelaskan perkara yang berlaku dalam kod di atas:<\/p>\n\n
Menetapkan Fon Lalai untuk Badan:<\/strong>
\n<\/p>npm create vite@latest\n<\/pre>\n\n\n\n\n
- \nTujuan<\/strong>: Ini menetapkan fon lalai untuk keseluruhan dokumen kepada 'Kyiv Sans'.<\/li>\n
- \nKesan<\/strong>: Semua elemen teks dalam kandungan akan mewarisi fon ini melainkan digantikan oleh gaya yang lebih khusus.<\/li>\n<\/ul>\n\n
Mentakrifkan Fon Tersuai:<\/strong>
\n<\/p>\n\nnpm run dev\n<\/pre>\n\n\n\n\n
- \nTujuan<\/strong>: Peraturan @font-face membolehkan anda menentukan fon tersuai.<\/li>\n
- \nNama Fon<\/strong>: Fon dinamakan 'Kyiv Sans'.<\/li>\n
- \nSumber<\/strong>: Fail fon terletak di \/font\/KyivTypeSans-VarGX.ttf.<\/li>\n
- \nJulat Berat Fon<\/strong>: Fon ini menyokong julat berat dari 0 hingga 1000, menjadikannya fon berubah-ubah.<\/li>\n
- \nPaparan Fon<\/strong>: swap memastikan teks dipaparkan serta-merta menggunakan fon sandaran sehingga fon tersuai dimuatkan.<\/li>\n<\/ul>\n\n
Menggayakan
Elemen:
\n\n\n\n\n \n \n \n\nVariable font<\/title>\n <\/head>\n <body> <h1><a href="http://m.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\n <div>\n\n\n\n<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>\n\n<p>The main.js code should look something like this:<br>\n<\/p>\n\n<pre>import \".\/style.css\";\n\ndocument.querySelector(\"#app\").innerHTML = `\n <div>\n <h1>\n\n\n\n<p>This is where we use document.querySelector() to add content to the element we insert our content into using the id: #<\/p>\n\n<p>And the style.css code should look something like this:<br>\n<\/p>\n\n<pre>body {\n font-family: 'Kyiv Sans';\n}\n\n@font-face {\n font-family: 'Kyiv Sans';\n src: url('\/font\/KyivTypeSans-VarGX.ttf');\n font-weight: 0 1000;\n font-display: swap;\n}\n\nh1 {\n color: #bd0c0c;\n height: 100vh;\n display: grid;\n place-content: center;\n margin: 0;\n text-align: center;\n}\n\n.variable-font {\n font-family: 'Kyiv Sans';\n font-size: 5rem;\n line-height: 1.1;\n font-weight: 100;\n font-variation-settings:\n 'wght' 100, 'CONT' 250, 'MIDL' 0;\n transition: font-variation-settings 500ms; \n}\n\n.variable-font:hover {\n font-weight: 1000;\n font-variation-settings:\n 'wght' 1000, 'CONT' 250, 'MIDL' -1000;\n}\n<\/pre>\n\n\n\n<ul>\n<li>\n<strong>Warna<\/strong>: Menetapkan warna teks kepada #bd0c0c, warna merah.<\/li>\n<li>\n<strong>Ketinggian<\/strong>: Ketinggian ditetapkan kepada 100vh, menjadikan <h1> elemen menjangkau ketinggian penuh port pandangan.\n<\/pre><\/pre>\n<li>\n<strong>Paparan<\/strong>: grid digunakan untuk reka letak, membenarkan penggunaan sifat grid.<\/li>\n<li>\n<strong>Memusatkan Kandungan<\/strong>: tempat-kandungan: tengah memusatkan kandungan secara menegak dan mendatar.<\/li>\n<li>\n<strong>Margin<\/strong>: Margin ditetapkan kepada 0 untuk mengalih keluar sebarang jarak lalai di sekeliling <h1>.<\/li>\n<li>\n<strong>Penjajaran Teks<\/strong>: Teks dipusatkan secara mendatar.<\/li>\n\n\n<p><strong>Menggayakan Kelas .variable-font:<\/strong><br>\n<\/p>\n\n<pre>body {\n font-family: 'Kyiv Sans';\n}\n<\/pre>\n\n\n\n<ul>\n<li>\n<strong>Font Family<\/strong>: Menggunakan 'Kyiv Sans' untuk teks.<\/li>\n<li>\n<strong>Saiz Fon<\/strong>: Menetapkan saiz fon kepada 5rem (berbanding saiz fon elemen akar).<\/li>\n<li>\n<strong>Ketinggian Garisan<\/strong>: 1.1 memastikan jarak yang sedikit antara baris.<\/li>\n<li>\n<strong>Berat Fon<\/strong>: Pada mulanya ditetapkan kepada 100.<\/li>\n<li>\n<strong>Tetapan Variasi Fon<\/strong>: Menggunakan tetapan variasi tersuai untuk fon berubah:\n\n<ul>\n<li>\n'wght' mengawal berat (pada mulanya 100).<\/li>\n<li>\n'CONT' dan 'MIDL' ialah paksi tersuai untuk fon ini, yang pada mulanya ditetapkan kepada 250 dan 0, masing-masing.<\/li>\n<\/ul>\n\n\n<\/li>\n\n<li>\n\n<strong>Peralihan<\/strong>: Peralihan tetapan variasi fon dengan lancar melebihi 500 milisaat.<\/li>\n\n<\/ul>\n\n<p><strong>Menambahkan Kesan Hover untuk .variable-font:<\/strong><br>\n<\/p>\n<pre>npm create vite@latest\n<\/pre>\n\n\n\n<ul>\n<li>\n<strong>Berat Fon pada Tuding<\/strong>: Bertukar kepada 1000 apabila elemen itu dilegarkan.<\/li>\n<li>\n<strong>Tetapan Variasi Fon pada Tuding<\/strong>: Mengemas kini tetapan variasi kepada:\n\n<ul>\n<li>\n'wght' kepada 1000\n<\/li>\n<li>\n'CONT' kekal 250\n<\/li>\n<li>\n'MIDL' berubah kepada -1000\n<\/li>\n<\/ul>\n\n\n<\/li>\n\n<li>\n\n<strong>Kesan<\/strong>: Mencipta kesan visual yang dinamik dan interaktif apabila pengguna melayang di atas teks, menyerlahkan fleksibiliti fon berubah.<\/li>\n\n<\/ul>\n\n<p>Pada penghujungnya kami akan mempunyai Keputusan kami kelihatan seperti ini;<br>\n<img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173372755661469.jpg\" alt=\"Variable Fonts for Dynamic Typography\"><\/p>\n<h2>\n \n \n Mencipta Tipografi Responsif dengan Fon Boleh Ubah\n<\/h2>\n\n<p>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.<\/p>\n<h3>\n \n \n Pertanyaan Media: Sarjana Adaptasi Saiz Skrin\n<\/h3>\n\n<p>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.<\/p>\n\n<p>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.<\/p>\n\n<p>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.<\/p>\n<p>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.<\/p>\n\n<p>Ini contohnya:<br>\n<\/p>\n\n<pre>npm create vite@latest\n<\/pre>\n\n\n\n<p>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.<br>\nPertanyaan media ini memastikan fon menyesuaikan dengan saiz skrin yang berbeza, meningkatkan kebolehbacaan dan pengalaman pengguna merentas pelbagai peranti.<\/p>\n\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173372755720318.jpg\" alt=\"Variable Fonts for Dynamic Typography\"><\/p>\n\n<p>Imej di atas menunjukkan paparan untuk Skrin kecil<\/p>\n\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173372755876188.jpg\" alt=\"Variable Fonts for Dynamic Typography\"><\/p>\n\n<p>Imej di atas menunjukkan paparan untuk skrin Sederhana<\/p>\n\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173372755953201.jpg\" alt=\"Variable Fonts for Dynamic Typography\"><\/p>\n\n<p>Imej di atas menunjukkan paparan untuk Skrin Besar<\/p>\n<h3>\n \n \n Unit Viewport: Membuat Reka Letak Bendalir\n<\/h3>\n\n<p>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.<\/p>\n\n<p>Berikut ialah contoh cara menggunakan vw untuk melaraskan saiz fon berdasarkan lebar viewport:<br>\n<\/p>\n<pre>npm create vite@latest\n<\/pre>\n\n\n\n<p>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.<\/p>\n\n<p>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.<\/p>\n\n<h2>\n \n \n Kesan Tipografi Lanjutan dengan Fon Boleh Ubah\n<\/h2>\n\n<p>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:<\/p>\n\n<h3>\n \n \n Tipografi Bendalir\n<\/h3>\n\n<p>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.<\/p>\n\n<p>Ini contohnya:<br>\n<\/p>\n\n<pre>npm run dev\n<\/pre>\n\n\n\n<p>Cara ia berfungsi:<\/p>\n\n<p><strong>Fungsi calc():<\/strong> 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.<\/p>\n\n<p><strong>Tipografi Bendalir untuk Pelbagai Elemen:<\/strong> 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.<\/p>\n<p><strong>Fon Boleh Ubah:<\/strong> Dengan menggabungkan tipografi cecair dengan fon boleh tukar, anda boleh mencapai perubahan dinamik dalam atribut teks bergantung pada saiz port pandangan.<br>\nKaedah ini menjamin bahawa teks kekal estetik dan boleh dibaca merentas spektrum besar peranti dan saiz skrin.<\/p>\n\n<p>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.<\/p>\n\n<h3>\n \n \n Contoh: Animating Weight on Hover\n<\/h3>\n\n\n\n<pre>npm create vite@latest\n<\/pre>\n\n\n\n<p>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.<\/p>\n\n<p>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.<\/p>\n\n<h2>\n \n \n Kesimpulan\n<\/h2>\n\n<p>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.<br>\nPereka 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.<\/p>\n<h2>\n \n \n Sumber\n<\/h2>\n\n<ul>\n<li>Lihat pratonton langsung yang dihoskan di Netlify\n<\/li>\n<li>Lihat kod Sumber <\/li>\n<\/ul>\n\n<h2>\n \n \n Rujukan\n<\/h2>\n\n<ul>\n<li>fon boleh ubah<\/li>\n<li>OpenType<\/li>\n<li>Kyiv Sans<\/li>\n<li>port pandangan<\/li>\n<li>muka taip<\/li>\n<li>paksi berdaftar<\/li>\n<li>paksi tersuai<\/li>\n<li>@font-face<\/li>\n<li>Taip Rangkaian<\/li>\n<li>Font Tupai<\/li>\n<li>\nFont Adobe?<\/li>\n<li>Fon Spring<\/li>\n<li>Fon Google<\/li>\n<li>\nVfonts.com <\/li>\n<li>ttf<\/li>\n<li>\nwoff2 <\/li>\n<li>everythingfonts.com<\/li>\n<li>Behance.net<\/li>\n<li>pertanyaan media<\/li>\n<li>px<\/li>\n<li>rem<\/li>\n<li>\nvw <\/li>\n<li>\nvh <\/li>\n<li>calc()<\/li>\n<\/ul>\n\n\n \n\n \n "} </script> <meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <script>var V_PATH="/";window.onerror=function(){ return true; };</script> </head> <body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2"> <link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css"> <header> <div id="377j5v51b" class="head"> <div id="377j5v51b" class="haed_left"> <div id="377j5v51b" class="haed_logo"> <a href="http://m.miracleart.cn/ms/" title="" class="haed_logo_a"> <img src="/static/imghw/logo.png" alt="" class="haed_logoimg"> </a> </div> <div id="377j5v51b" class="head_nav"> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="masyarakat" class="head_nava head_nava-template1">masyarakat</a> <div class="377j5v51b" id="dropdown-template1" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://m.miracleart.cn/ms/article.html" title="Artikel" class="languagechoosea on">Artikel</a> <a href="http://m.miracleart.cn/ms/faq/zt" title="Topik" class="languagechoosea">Topik</a> <a href="http://m.miracleart.cn/ms/wenda.html" title="Soal Jawab" class="languagechoosea">Soal Jawab</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="Belajar" class="head_nava head_nava-template1_1">Belajar</a> <div class="377j5v51b" id="dropdown-template1_1" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://m.miracleart.cn/ms/course.html" title="Kursus" class="languagechoosea on">Kursus</a> <a href="http://m.miracleart.cn/ms/dic/" title="Kamus Pengaturcaraan" class="languagechoosea">Kamus Pengaturcaraan</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="Perpustakaan Alatan" class="head_nava head_nava-template1_2">Perpustakaan Alatan</a> <div class="377j5v51b" id="dropdown-template1_2" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://m.miracleart.cn/ms/toolset/development-tools" title="Alat pembangunan" class="languagechoosea on">Alat pembangunan</a> <a href="http://m.miracleart.cn/ms/toolset/website-source-code" title="Kod sumber laman web" class="languagechoosea">Kod sumber laman web</a> <a href="http://m.miracleart.cn/ms/toolset/php-libraries" title="Perpustakaan PHP" class="languagechoosea">Perpustakaan PHP</a> <a href="http://m.miracleart.cn/ms/toolset/js-special-effects" title="Kesan khas JS" class="languagechoosea on">Kesan khas JS</a> <a href="http://m.miracleart.cn/ms/toolset/website-materials" title="Bahan laman web" class="languagechoosea on">Bahan laman web</a> <a href="http://m.miracleart.cn/ms/toolset/extension-plug-ins" title="Pemalam sambungan" class="languagechoosea on">Pemalam sambungan</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="http://m.miracleart.cn/ms/ai" title="Alat AI" class="head_nava head_nava-template1_3">Alat AI</a> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="Masa lapang" class="head_nava head_nava-template1_3">Masa lapang</a> <div class="377j5v51b" id="dropdown-template1_3" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://m.miracleart.cn/ms/game" title="Muat Turun Permainan" class="languagechoosea on">Muat Turun Permainan</a> <a href="http://m.miracleart.cn/ms/mobile-game-tutorial/" title="Tutorial Permainan" class="languagechoosea">Tutorial Permainan</a> </div> </div> </div> </div> </div> <div id="377j5v51b" class="head_search"> <input id="key_words" onkeydown="if (event.keyCode == 13) searchs('ms')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value=""> <a href="javascript:;" title="cari" onclick="searchs('ms')"><img src="/static/imghw/find.png" alt="cari"></a> </div> <div id="377j5v51b" class="head_right"> <div id="377j5v51b" class="haed_language"> <a href="javascript:;" class="layui-btn haed_language_btn">Melayu<i class="layui-icon layui-icon-triangle-d"></i></a> <div class="377j5v51b" id="dropdown-template" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="javascript:setlang('zh-cn');" title="簡(jiǎn)體中文" class="languagechoosea">簡(jiǎn)體中文</a> <a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a> <a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a> <a href="javascript:setlang('ja');" title="日本語" class="languagechoosea">日本語</a> <a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a> <a href="javascript:;" title="Melayu" class="languagechoosea">Melayu</a> <a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a> <a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a> </div> </div> </div> <span id="377j5v51b" class="head_right_line"></span> <div style="display: block;" id="login" class="haed_login "> <a href="javascript:;" title="Login" class="haed_logina ">Login</a> </div> <div style="display: block;" id="reg" class="head_signup login"> <a href="javascript:;" title="singup" class="head_signupa">singup</a> </div> </div> </div> </header> <main> <div id="377j5v51b" class="Article_Details_main"> <div id="377j5v51b" class="Article_Details_main1"> <div id="377j5v51b" class="Article_Details_main1M"> <div id="377j5v51b" class="phpgenera_Details_mainL1"> <a href="http://m.miracleart.cn/ms/" title="Rumah" class="phpgenera_Details_mainL1a">Rumah</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://m.miracleart.cn/ms/web-designer.html" class="phpgenera_Details_mainL1a">hujung hadapan web</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://m.miracleart.cn/ms/css-tutorial.html" class="phpgenera_Details_mainL1a">tutorial css</a> <img src="/static/imghw/top_right.png" alt="" /> <span>Fon Boleh Ubah untuk Tipografi Dinamik</span> </div> <div id="377j5v51b" class="Articlelist_txts"> <div id="377j5v51b" class="Articlelist_txts_info"> <h1 class="Articlelist_txts_title">Fon Boleh Ubah untuk Tipografi Dinamik</h1> <div id="377j5v51b" class="Articlelist_txts_info_head"> <div id="377j5v51b" class="author_info"> <a href="http://m.miracleart.cn/ms/member/1468490.html" class="author_avatar"> <img class="lazy" data-src="https://img.php.cn/upload/avatar/000/000/001/66ea8170af62b832.png" src="/static/imghw/default1.png" alt="Barbara Streisand"> </a> <div id="377j5v51b" class="author_detail"> <a href="http://m.miracleart.cn/ms/member/1468490.html" class="author_name">Barbara Streisand</a> </div> </div> </div> <span id="377j5v51b" class="Articlelist_txts_time">Dec 09, 2024 pm 02:59 PM</span> </div> </div> <hr /> <div id="377j5v51b" class="article_main php-article"> <div id="377j5v51b" class="article-list-left detail-content-wrap content"> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3461856641"> </ins> <p>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?</p> <p>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.</p> <p>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.</p> <h2> Pengenalan kepada Fon Boleh Ubah </h2> <p>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.</p> <p>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.</p> <h3> Faedah Fon Pembolehubah dalam CSS </h3> <p>Kami akan membimbing anda melalui cara mencipta tipografi CSS yang dinamik dan menyenangkan dari segi estetika menggunakan alatan ini. Mari kita periksa beberapa contoh:</p> <p><strong>Kecekapan:</strong> Dengan menggabungkan beberapa gaya fon ke dalam satu fail, fon berubah-ubah meminimumkan permintaan HTTP, mempercepatkan pemuatan halaman dan kecekapan keseluruhan.</p> <p><strong>Fleksibiliti:</strong> 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.</p> <p><strong>Peralihan Lancar:</strong> 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.</p> <p><strong>Tipografi Responsif:</strong> 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.</p> <p><strong>Tipografi Dinamik:</strong> 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.</p> <p><strong>Kebolehaksesan:</strong> Rangkaian pilihan tipografi yang lebih luas membolehkan penyesuaian dan pengubahsuaian teks untuk memastikan kebolehbacaan dan kebolehbacaan merentas pelbagai peranti dan pilihan pengguna.</p> <p><strong>Estetika:</strong> Di web, fon berubah-ubah memberi inspirasi kepada idea reka bentuk kreatif dan mencabar sempadan tipografi, membuka peluang baharu untuk ekspresi tipografi dan percubaan.</p> <p><strong>Skalabiliti:</strong> 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.</p> <h3> Pengenalan kepada konsep tipografi responsif dan dinamik menggunakan fon berubah-ubah </h3> <p>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:</p> <p>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.</p> <p><strong>Tipografi Responsif:</strong> 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.</p> <p><strong>Tipografi Dinamik:</strong> 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.</p> <p> 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.</p> <p>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.</p> <h2> Memahami Sifat Font Pembolehubah </h2> <p>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:</p> <p><strong>Berat (berat):</strong> 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.</p> <p><strong>Kesan Lapisan Tengah (MIDL):</strong> 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.</p> <p><strong>Kontras (SAMB):</strong> 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.</p> <p>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.</p> <h3> Gambaran keseluruhan paksi dan variasi tambahan yang tersedia dalam fon berubah-ubah </h3> <p>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:</p> <p>Beberapa paksi berdaftar yang mungkin digunakan oleh pereka bentuk fon berubah ditakrifkan oleh spesifikasi OpenType:</p> <ul> <li><p>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.</p></li> <li><p>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.</p></li> <li><p>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.</p></li> <li><p>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.</p></li> <li><p>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.</p></li> <li><p>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.</p></li> <li><p>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.</p></li> </ul> <p>Selain daripada paksi berdaftar, pencipta fon berubah boleh menentukan paksi tersuai mereka sendiri. Mengenai Kyiv Sans: ini terdiri daripada:</p> <ul> <li><p>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.</p></li> <li><p>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.</p></li> </ul> <p>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.</p> <h2> Melaksanakan Fon Pembolehubah dalam CSS </h2> <p>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.</p> <h3> Mendapatkan fon </h3> <p>Pertama, kita mesti memuat turun fon berubah yang kita mahu untuk projek kita.<br> Beberapa laman web di internet membenarkan kami mengakses pelbagai fail fon. Beberapa laman web fon yang paling kerap digunakan adalah seperti berikut:</p> <ul> <li>Taip Rangkaian</li> <li>Font Tupai</li> <li> Font Adobe?</li> <li>Fon Spring</li> <li>Fon Google</li> <li>Vfonts.com</li> </ul> <p>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:</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173372755444094.jpg" class="lazy" alt="Variable Fonts for Dynamic Typography"></p> <p>Tangkapan skrin di atas menunjukkan perkara yang anda akan lihat apabila anda tiba di Vfont.</p> <p>Kami membahagikan projek kepada langkah-langkah berikut:</p> <ol> <li><p>Navigasi ke vfont: Lawati tapak web di mana sumber fon berubah tersedia.</p></li> <li><p>Pilih Jenis Kyiv*: Pilih fon Jenis Kyiv*, yang akan mengubah hala anda ke Behance.net tempat fon dihoskan.</p></li> <li><p>Akses Pautan Muat Turun: Pada halaman Behance, tatal ke bawah untuk mencari pautan untuk memuat turun fon.</p></li> <li><p>Muat turun dari Google Drive: Klik pada pautan muat turun, yang akan membawa anda ke folder Google Drive. Muat turun fail fon dari sana.</p></li> <li><p>Nyahzip Fail: Selepas memuat turun, nyahzip fail untuk mengakses kandungannya.</p></li> <li> <p>Semak Pilihan Fon: Folder yang dinyahzip mengandungi beberapa pilihan untuk dipilih.</p> <ul> <li>Ikon</li> <li>Tiada pembolehubah</li> <li>Pembolehubah</li> </ul> </li> <li> <p>Pilih fon berubah: Fokus pada fail yang termasuk fon berubah.</p> <ul> <li>Serif</li> <li>Mencondongkan</li> <li>Sans</li> </ul> </li> <li><p>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.</p></li> <li><p>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.</p></li> </ol> <p>Nota: Fail di atas ini dalam format TTF.</p> <p>Sekarang kita akan menuju ke VSCode, di mana kita akan menggunakan projek vanilla vite.<br> Untuk mula bekerja pada projek itu, anda mesti memasang pakej yang diperlukan. Anda perlu ikut langkah di bawah:</p> <ol> <li><p>Buka terminal baharu.</p></li> <li> <p>Jalankan arahan<br> </p> <pre class="brush:php;toolbar:false">npm create vite@latest </pre> </li> <li><p>Namakan projek anda.</p></li> <li><p>Namakan pakej anda.</p></li> <li><p>Pilih rangka kerja Vanila.</p></li> <li><p>Pilih varian JavaScript.</p></li> <li><p>Menjalankan pemasangan npm akan membantu anda berunding ke dalam projek dan memasang modul yang diperlukan.</p></li> <li> <p>Selepas menyediakan kebergantungan, gunakan arahan berikut untuk melancarkan aplikasi:<br> </p> <pre class="brush:php;toolbar:false">npm run dev </pre> </li> <li><p>Lawati http://localhost:your-port-number untuk mengakses program yang sedang berjalan pada penyemak imbas anda.</p></li> </ol> <p>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.</p> <p>Kod index.html sepatutnya kelihatan seperti ini:<br> </p> <pre class="brush:php;toolbar:false"><!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; } </pre> <p>Sekarang, mari jelaskan perkara yang berlaku dalam kod di atas:</p> <p><strong>Menetapkan Fon Lalai untuk Badan:</strong><br> </p><pre class="brush:php;toolbar:false">npm create vite@latest </pre> <ul> <li> <strong>Tujuan</strong>: Ini menetapkan fon lalai untuk keseluruhan dokumen kepada 'Kyiv Sans'.</li> <li> <strong>Kesan</strong>: Semua elemen teks dalam kandungan akan mewarisi fon ini melainkan digantikan oleh gaya yang lebih khusus.</li> </ul> <p><strong>Mentakrifkan Fon Tersuai:</strong><br> </p> <pre class="brush:php;toolbar:false">npm run dev </pre> <ul> <li> <strong>Tujuan</strong>: Peraturan @font-face membolehkan anda menentukan fon tersuai.</li> <li> <strong>Nama Fon</strong>: Fon dinamakan 'Kyiv Sans'.</li> <li> <strong>Sumber</strong>: Fail fon terletak di /font/KyivTypeSans-VarGX.ttf.</li> <li> <strong>Julat Berat Fon</strong>: Fon ini menyokong julat berat dari 0 hingga 1000, menjadikannya fon berubah-ubah.</li> <li> <strong>Paparan Fon</strong>: swap memastikan teks dipaparkan serta-merta menggunakan fon sandaran sehingga fon tersuai dimuatkan.</li> </ul> <p><strong>Menggayakan <h1> Elemen:<br> <pre class="brush:php;toolbar:false"><!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; } </pre> <ul> <li> <strong>Warna</strong>: Menetapkan warna teks kepada #bd0c0c, warna merah.</li> <li> <strong>Ketinggian</strong>: Ketinggian ditetapkan kepada 100vh, menjadikan <h1> elemen menjangkau ketinggian penuh port pandangan. </pre></pre> <li> <strong>Paparan</strong>: grid digunakan untuk reka letak, membenarkan penggunaan sifat grid.</li> <li> <strong>Memusatkan Kandungan</strong>: tempat-kandungan: tengah memusatkan kandungan secara menegak dan mendatar.</li> <li> <strong>Margin</strong>: Margin ditetapkan kepada 0 untuk mengalih keluar sebarang jarak lalai di sekeliling <h1>.</li> <li> <strong>Penjajaran Teks</strong>: Teks dipusatkan secara mendatar.</li> <p><strong>Menggayakan Kelas .variable-font:</strong><br> </p> <pre class="brush:php;toolbar:false">body { font-family: 'Kyiv Sans'; } </pre> <ul> <li> <strong>Font Family</strong>: Menggunakan 'Kyiv Sans' untuk teks.</li> <li> <strong>Saiz Fon</strong>: Menetapkan saiz fon kepada 5rem (berbanding saiz fon elemen akar).</li> <li> <strong>Ketinggian Garisan</strong>: 1.1 memastikan jarak yang sedikit antara baris.</li> <li> <strong>Berat Fon</strong>: Pada mulanya ditetapkan kepada 100.</li> <li> <strong>Tetapan Variasi Fon</strong>: Menggunakan tetapan variasi tersuai untuk fon berubah: <ul> <li> 'wght' mengawal berat (pada mulanya 100).</li> <li> 'CONT' dan 'MIDL' ialah paksi tersuai untuk fon ini, yang pada mulanya ditetapkan kepada 250 dan 0, masing-masing.</li> </ul> </li> <li> <strong>Peralihan</strong>: Peralihan tetapan variasi fon dengan lancar melebihi 500 milisaat.</li> </ul> <p><strong>Menambahkan Kesan Hover untuk .variable-font:</strong><br> </p> <pre class="brush:php;toolbar:false">npm create vite@latest </pre> <ul> <li> <strong>Berat Fon pada Tuding</strong>: Bertukar kepada 1000 apabila elemen itu dilegarkan.</li> <li> <strong>Tetapan Variasi Fon pada Tuding</strong>: Mengemas kini tetapan variasi kepada: <ul> <li> 'wght' kepada 1000 </li> <li> 'CONT' kekal 250 </li> <li> 'MIDL' berubah kepada -1000 </li> </ul> </li> <li> <strong>Kesan</strong>: Mencipta kesan visual yang dinamik dan interaktif apabila pengguna melayang di atas teks, menyerlahkan fleksibiliti fon berubah.</li> </ul> <p>Pada penghujungnya kami akan mempunyai Keputusan kami kelihatan seperti ini;<br> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173372755661469.jpg" class="lazy" alt="Variable Fonts for Dynamic Typography"></p> <h2> Mencipta Tipografi Responsif dengan Fon Boleh Ubah </h2> <p>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.</p> <h3> Pertanyaan Media: Sarjana Adaptasi Saiz Skrin </h3> <p>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.</p> <p>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.</p> <p>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.</p> <p>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.</p> <p>Ini contohnya:<br> </p> <pre class="brush:php;toolbar:false">npm create vite@latest </pre> <p>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.<br> Pertanyaan media ini memastikan fon menyesuaikan dengan saiz skrin yang berbeza, meningkatkan kebolehbacaan dan pengalaman pengguna merentas pelbagai peranti.</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173372755720318.jpg" class="lazy" alt="Variable Fonts for Dynamic Typography"></p> <p>Imej di atas menunjukkan paparan untuk Skrin kecil</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173372755876188.jpg" class="lazy" alt="Variable Fonts for Dynamic Typography"></p> <p>Imej di atas menunjukkan paparan untuk skrin Sederhana</p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173372755953201.jpg" class="lazy" alt="Variable Fonts for Dynamic Typography"></p> <p>Imej di atas menunjukkan paparan untuk Skrin Besar</p> <h3> Unit Viewport: Membuat Reka Letak Bendalir </h3> <p>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.</p> <p>Berikut ialah contoh cara menggunakan vw untuk melaraskan saiz fon berdasarkan lebar viewport:<br> </p> <pre class="brush:php;toolbar:false">npm create vite@latest </pre> <p>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.</p> <p>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.</p> <h2> Kesan Tipografi Lanjutan dengan Fon Boleh Ubah </h2> <p>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:</p> <h3> Tipografi Bendalir </h3> <p>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.</p> <p>Ini contohnya:<br> </p> <pre class="brush:php;toolbar:false">npm run dev </pre> <p>Cara ia berfungsi:</p> <p><strong>Fungsi calc():</strong> 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.</p> <p><strong>Tipografi Bendalir untuk Pelbagai Elemen:</strong> 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.</p> <p><strong>Fon Boleh Ubah:</strong> Dengan menggabungkan tipografi cecair dengan fon boleh tukar, anda boleh mencapai perubahan dinamik dalam atribut teks bergantung pada saiz port pandangan.<br> Kaedah ini menjamin bahawa teks kekal estetik dan boleh dibaca merentas spektrum besar peranti dan saiz skrin.</p> <p>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.</p> <h3> Contoh: Animating Weight on Hover </h3> <pre class="brush:php;toolbar:false">npm create vite@latest </pre> <p>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.</p> <p>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.</p> <h2> Kesimpulan </h2> <p>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.<br> 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.</p> <h2> Sumber </h2> <ul> <li>Lihat pratonton langsung yang dihoskan di Netlify </li> <li>Lihat kod Sumber </li> </ul> <h2> Rujukan </h2> <ul> <li>fon boleh ubah</li> <li>OpenType</li> <li>Kyiv Sans</li> <li>port pandangan</li> <li>muka taip</li> <li>paksi berdaftar</li> <li>paksi tersuai</li> <li>@font-face</li> <li>Taip Rangkaian</li> <li>Font Tupai</li> <li> Font Adobe?</li> <li>Fon Spring</li> <li>Fon Google</li> <li> Vfonts.com </li> <li>ttf</li> <li> woff2 </li> <li>everythingfonts.com</li> <li>Behance.net</li> <li>pertanyaan media</li> <li>px</li> <li>rem</li> <li> vw </li> <li> vh </li> <li>calc()</li> </ul> <p>Atas ialah kandungan terperinci Fon Boleh Ubah untuk Tipografi Dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p> </div> </div> <div id="377j5v51b" class="wzconShengming_sp"> <div id="377j5v51b" class="bzsmdiv_sp">Kenyataan Laman Web ini</div> <div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <div id="377j5v51b" class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <!-- <div id="377j5v51b" class="phpgenera_Details_mainR4"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Artikel Panas</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/1796821119.html" title="Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan" class="phpgenera_Details_mainR4_bottom_title">Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 minggu yang lalu</span> <span>By DDD</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/1796827210.html" title="Oguri Cap Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | Musume Derby Pretty</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>2 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/1796828723.html" title="Agnes Tachyon Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | Musume Derby Pretty</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>2 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/1796821436.html" title="Dune: Awakening - Lanjutan Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Lanjutan Planetologist Quest Walkthrough</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/1796821278.html" title="Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper" class="phpgenera_Details_mainR4_bottom_title">Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://m.miracleart.cn/ms/article.html">Tunjukkan Lagi</a> </div> </div> </div> --> <div id="377j5v51b" class="phpgenera_Details_mainR3"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Alat AI Hot</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_bottom"> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>Gambar buka pakaian secara percuma</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>Apl berkuasa AI untuk mencipta foto bogel yang realistik</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>Penyingkiran pakaian AI</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/ms/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/ms/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!</p> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://m.miracleart.cn/ms/ai">Tunjukkan Lagi</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Artikel Panas</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/1796821119.html" title="Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan" class="phpgenera_Details_mainR4_bottom_title">Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 minggu yang lalu</span> <span>By DDD</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/1796827210.html" title="Oguri Cap Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | Musume Derby Pretty</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>2 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/1796828723.html" title="Agnes Tachyon Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | Musume Derby Pretty</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>2 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/1796821436.html" title="Dune: Awakening - Lanjutan Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Lanjutan Planetologist Quest Walkthrough</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/1796821278.html" title="Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper" class="phpgenera_Details_mainR4_bottom_title">Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://m.miracleart.cn/ms/article.html">Tunjukkan Lagi</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Alat panas</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_bottom"> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title"> <h3>Notepad++7.3.1</h3> </a> <p>Editor kod yang mudah digunakan dan percuma</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 versi Cina" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_title"> <h3>SublimeText3 versi Cina</h3> </a> <p>Versi Cina, sangat mudah digunakan</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Hantar Studio 13.0.1" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_title"> <h3>Hantar Studio 13.0.1</h3> </a> <p>Persekitaran pembangunan bersepadu PHP yang berkuasa</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"> <h3>Dreamweaver CS6</h3> </a> <p>Alat pembangunan web visual</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 versi Mac" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_title"> <h3>SublimeText3 versi Mac</h3> </a> <p>Perisian penyuntingan kod peringkat Tuhan (SublimeText3)</p> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://m.miracleart.cn/ms/ai">Tunjukkan Lagi</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Topik panas</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/gmailyxdlrkzn" title="Di manakah pintu masuk log masuk untuk e-mel gmail?" class="phpgenera_Details_mainR4_bottom_title">Di manakah pintu masuk log masuk untuk e-mel gmail?</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>8638</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>17</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/java-tutorial" title="Tutorial Java" class="phpgenera_Details_mainR4_bottom_title">Tutorial Java</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1784</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>16</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/cakephp-tutor" title="Tutorial CakePHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial CakePHP</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1729</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>56</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/laravel-tutori" title="Tutorial Laravel" class="phpgenera_Details_mainR4_bottom_title">Tutorial Laravel</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1580</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>28</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/ms/faq/php-tutorial" title="Tutorial PHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial PHP</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1445</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>31</span> </div> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://m.miracleart.cn/ms/faq/zt">Tunjukkan Lagi</a> </div> </div> </div> </div> </div> <div id="377j5v51b" class="Article_Details_main2"> <div id="377j5v51b" class="phpgenera_Details_mainL4"> <div id="377j5v51b" class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div id="377j5v51b" class="phpgenera_Details_mainL4_info"> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/ms/faq/1796823628.html" title="Apa itu 'menyekat CSS'?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175069693197174.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apa itu 'menyekat CSS'?" /> </a> <a href="http://m.miracleart.cn/ms/faq/1796823628.html" title="Apa itu 'menyekat CSS'?" class="phphistorical_Version2_mids_title">Apa itu 'menyekat CSS'?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 24, 2025 am 12:42 AM</span> <p class="Articlelist_txts_p">CSS Blok halaman yang diberikan kerana pelayar melihat CSS dalam talian dan luaran sebagai sumber utama secara lalai, terutamanya dengan stylesheet yang diimport, header sejumlah besar CSS sebaris, dan gaya pertanyaan media yang tidak dapat dioptimumkan. 1. Ekstrak CSS kritikal dan membenamkannya ke HTML; 2. Kelewatan memuatkan CSS bukan kritikal melalui JavaScript; 3. Gunakan atribut media untuk mengoptimumkan pemuatan seperti gaya cetak; 4. Memampatkan dan menggabungkan CSS untuk mengurangkan permintaan. Adalah disyorkan untuk menggunakan alat untuk mengekstrak CSS utama, menggabungkan REL = "Preload" pemuatan asynchronous, dan menggunakan media yang ditangguhkan dengan munasabah untuk mengelakkan pemisahan yang berlebihan dan kawalan skrip kompleks.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/ms/faq/1796822133.html" title="Luaran vs CSS Dalaman: Apakah pendekatan terbaik?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175035152168797.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Luaran vs CSS Dalaman: Apakah pendekatan terbaik?" /> </a> <a href="http://m.miracleart.cn/ms/faq/1796822133.html" title="Luaran vs CSS Dalaman: Apakah pendekatan terbaik?" class="phphistorical_Version2_mids_title">Luaran vs CSS Dalaman: Apakah pendekatan terbaik?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:45 AM</span> <p class="Articlelist_txts_p">Thebestapproachforcssdependonstantheproject'ssspecificneeds.forlargerprojects, externalcssisbetterduetomaintainabilityability;</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/ms/faq/1796821588.html" title="Adakah CSS saya mesti berada di bawah kes?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026415047262.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Adakah CSS saya mesti berada di bawah kes?" /> </a> <a href="http://m.miracleart.cn/ms/faq/1796821588.html" title="Adakah CSS saya mesti berada di bawah kes?" class="phphistorical_Version2_mids_title">Adakah CSS saya mesti berada di bawah kes?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:29 AM</span> <p class="Articlelist_txts_p">Tidak, cssdoesnothavetobeinlowercase.however, menggunakanLowerCaseisRecommendorfendfor: 1) Consistencyandreadability, 2) Mengelakkaningerrorsinrelatedtechnologies, 3) potensiformanceBenefits, dan4) peningkatan yang lebih baik.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/ms/faq/1796821998.html" title="Kepekaan kes CSS: Memahami apa yang penting" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175034936181156.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Kepekaan kes CSS: Memahami apa yang penting" /> </a> <a href="http://m.miracleart.cn/ms/faq/1796821998.html" title="Kepekaan kes CSS: Memahami apa yang penting" class="phphistorical_Version2_mids_title">Kepekaan kes CSS: Memahami apa yang penting</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:09 AM</span> <p class="Articlelist_txts_p">Cssismostlycase-insensitive, buturlsandfontfamilynamesarecase-sensitif.1) propertiesandvalueslikecolor: merah; arenotcase-sensitif.2) urlsmustmatchtheserver'scase, mis.,</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/ms/faq/1796828180.html" title="Apakah AutoPrefixer dan bagaimana ia berfungsi?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175139012130913.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah AutoPrefixer dan bagaimana ia berfungsi?" /> </a> <a href="http://m.miracleart.cn/ms/faq/1796828180.html" title="Apakah AutoPrefixer dan bagaimana ia berfungsi?" class="phphistorical_Version2_mids_title">Apakah AutoPrefixer dan bagaimana ia berfungsi?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:15 AM</span> <p class="Articlelist_txts_p">AutoPrefixer adalah alat yang secara automatik menambah awalan vendor ke atribut CSS berdasarkan skop penyemak imbas sasaran. 1. Ia menyelesaikan masalah mengekalkan awalan secara manual dengan kesilapan; 2. Bekerja melalui borang pemalam postcss, menghuraikan CSS, menganalisis atribut yang perlu diawali, dan menjana kod mengikut konfigurasi; 3. Langkah-langkah penggunaan termasuk memasang pemalam, menetapkan senarai pelayar, dan membolehkan mereka dalam proses membina; 4. Nota termasuk tidak menambah awalan secara manual, menyimpan kemas kini konfigurasi, awalan tidak semua atribut, dan disyorkan untuk menggunakannya dengan preprocessor.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/ms/faq/1796821606.html" title="Apakah kaunter CSS?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026444127039.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah kaunter CSS?" /> </a> <a href="http://m.miracleart.cn/ms/faq/1796821606.html" title="Apakah kaunter CSS?" class="phphistorical_Version2_mids_title">Apakah kaunter CSS?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:34 AM</span> <p class="Articlelist_txts_p">Csscounterscanautomaticallynumbersectionsandlists.1) useCounter-resettoinitialize, counter-incrementToinCrease, andCounter () orcounters () todisplayvalues.2) CombinWithjavascriptfordynamicContentToenSureAccurateupdates.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/ms/faq/1796821580.html" title="CSS: Bilakah kes perkara (dan kapan tidak)?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026403168895.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS: Bilakah kes perkara (dan kapan tidak)?" /> </a> <a href="http://m.miracleart.cn/ms/faq/1796821580.html" title="CSS: Bilakah kes perkara (dan kapan tidak)?" class="phphistorical_Version2_mids_title">CSS: Bilakah kes perkara (dan kapan tidak)?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:27 AM</span> <p class="Articlelist_txts_p">Dalam CSS, nama pemilih dan atribut adalah sensitif kes, manakala nilai, warna yang dinamakan, URL, dan atribut tersuai adalah sensitif kes. 1. Nama pemilih dan atribut adalah kes-tidak sensitif, seperti warna latar belakang dan warna latar belakang adalah sama. 2. Warna heksadesimal dalam nilai adalah sensitif kes, tetapi warna bernama adalah sensitif kes, seperti merah dan merah tidak sah. 3. URL adalah sensitif kes dan boleh menyebabkan masalah pemuatan fail. 4. Sifat tersuai (pembolehubah) adalah sensitif kes, dan anda perlu memberi perhatian kepada konsistensi kes apabila menggunakannya.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/ms/faq/1796827610.html" title="Apakah fungsi conic-gradient ()?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175130377175874.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah fungsi conic-gradient ()?" /> </a> <a href="http://m.miracleart.cn/ms/faq/1796827610.html" title="Apakah fungsi conic-gradient ()?" class="phphistorical_Version2_mids_title">Apakah fungsi conic-gradient ()?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 01, 2025 am 01:16 AM</span> <p class="Articlelist_txts_p">Function-gradient () functionIncsscreatesculculargradientsthatrotatecolorstopsaroundroentroint.1.ISIISIDEALFORPIECHARTS, Progressindicators, Colorwheels, andDecorativeBackgrounds.2.itworksByDefiningColorStopsatSpecificles, OpsticalStarting</p> </div> </div> <a href="http://m.miracleart.cn/ms/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div id="377j5v51b" class="footer"> <div id="377j5v51b" class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p> </div> <div id="377j5v51b" class="footermid"> <a href="http://m.miracleart.cn/ms/about/us.html">Tentang kita</a> <a href="http://m.miracleart.cn/ms/about/disclaimer.html">Penafian</a> <a href="http://m.miracleart.cn/ms/update/article_0_1.html">Sitemap</a> </div> <div id="377j5v51b" class="footerbottom"> <p> ? php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p> <a href="http://m.miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a> <div class="friend-links"> </div> </div> </footer> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body><div id="ioscd" class="pl_css_ganrao" style="display: none;"><small id="ioscd"></small><tr id="ioscd"></tr><pre id="ioscd"></pre><pre id="ioscd"></pre><small id="ioscd"></small><li id="ioscd"><dl id="ioscd"><em id="ioscd"><pre id="ioscd"></pre></em></dl></li><legend id="ioscd"></legend><dd id="ioscd"></dd><var id="ioscd"><center id="ioscd"><object id="ioscd"><tt id="ioscd"></tt></object></center></var><table id="ioscd"></table><style id="ioscd"></style><wbr id="ioscd"><ul id="ioscd"><center id="ioscd"></center></ul></wbr><progress id="ioscd"><small id="ioscd"><pre id="ioscd"><dfn id="ioscd"></dfn></pre></small></progress><object id="ioscd"></object><bdo id="ioscd"></bdo><tbody id="ioscd"><strike id="ioscd"></strike></tbody><delect id="ioscd"><style id="ioscd"></style></delect><dd id="ioscd"></dd><fieldset id="ioscd"><center id="ioscd"><th id="ioscd"></th></center></fieldset><dd id="ioscd"><strong id="ioscd"></strong></dd><tt id="ioscd"></tt><bdo id="ioscd"></bdo><tr id="ioscd"></tr><tr id="ioscd"></tr><kbd id="ioscd"></kbd><listing id="ioscd"></listing><option id="ioscd"></option><wbr id="ioscd"></wbr><dd id="ioscd"></dd><small id="ioscd"><progress id="ioscd"></progress></small><del id="ioscd"><p id="ioscd"><kbd id="ioscd"><th id="ioscd"></th></kbd></p></del><ins id="ioscd"></ins><center id="ioscd"></center><u id="ioscd"></u><tfoot id="ioscd"></tfoot><fieldset id="ioscd"></fieldset><tbody id="ioscd"><big id="ioscd"><tbody id="ioscd"><strike id="ioscd"></strike></tbody></big></tbody><tr id="ioscd"></tr><em id="ioscd"></em><progress id="ioscd"></progress><strike id="ioscd"></strike><progress id="ioscd"></progress><tfoot id="ioscd"><pre id="ioscd"><span id="ioscd"></span></pre></tfoot><input id="ioscd"></input><table id="ioscd"></table><mark id="ioscd"></mark><code id="ioscd"><menuitem id="ioscd"><code id="ioscd"><acronym id="ioscd"></acronym></code></menuitem></code><object id="ioscd"></object><noframes id="ioscd"><span id="ioscd"></span></noframes><td id="ioscd"><form id="ioscd"><blockquote id="ioscd"></blockquote></form></td><optgroup id="ioscd"></optgroup><pre id="ioscd"></pre><cite id="ioscd"></cite><xmp id="ioscd"></xmp><thead id="ioscd"><output id="ioscd"><fieldset id="ioscd"><nobr id="ioscd"></nobr></fieldset></output></thead><dl id="ioscd"></dl><ul id="ioscd"></ul><fieldset id="ioscd"></fieldset><output id="ioscd"></output><delect id="ioscd"></delect><address id="ioscd"></address><table id="ioscd"></table><em id="ioscd"></em><cite id="ioscd"><ins id="ioscd"></ins></cite><tfoot id="ioscd"><track id="ioscd"><sup id="ioscd"></sup></track></tfoot><thead id="ioscd"><input id="ioscd"><del id="ioscd"><i id="ioscd"></i></del></input></thead><strike id="ioscd"></strike><video id="ioscd"></video><button id="ioscd"></button><legend id="ioscd"></legend><ol id="ioscd"></ol><tfoot id="ioscd"><track id="ioscd"></track></tfoot><label id="ioscd"><legend id="ioscd"><bdo id="ioscd"></bdo></legend></label><button id="ioscd"></button><button id="ioscd"></button><strike id="ioscd"></strike><menu id="ioscd"></menu><ruby id="ioscd"></ruby><s id="ioscd"><samp id="ioscd"><thead id="ioscd"></thead></samp></s><div id="ioscd"></div><strike id="ioscd"><button id="ioscd"><dl id="ioscd"></dl></button></strike><tr id="ioscd"></tr><strong id="ioscd"></strong><strong id="ioscd"></strong><tr id="ioscd"></tr><font id="ioscd"></font><ins id="ioscd"><cite id="ioscd"><acronym id="ioscd"><sup id="ioscd"></sup></acronym></cite></ins><dfn id="ioscd"><em id="ioscd"><sub id="ioscd"></sub></em></dfn><center id="ioscd"></center><s id="ioscd"><b id="ioscd"><s id="ioscd"><kbd id="ioscd"></kbd></s></b></s><b id="ioscd"></b><p id="ioscd"></p><legend id="ioscd"></legend><bdo id="ioscd"><center id="ioscd"></center></bdo><xmp id="ioscd"><li id="ioscd"><samp id="ioscd"></samp></li></xmp><input id="ioscd"><xmp id="ioscd"><label id="ioscd"></label></xmp></input><abbr id="ioscd"><div id="ioscd"></div></abbr><div id="ioscd"><rp id="ioscd"></rp></div><abbr id="ioscd"></abbr><xmp id="ioscd"></xmp></div> </html>