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\n現(xiàn)在，讓我們解釋一下上面代碼中發(fā)生的事情：<\/p>\n\n
設(shè)置正文的默認(rèn)字體：<\/strong>
\n<\/p>npm create vite@latest\n<\/pre>\n\n\n\n<\/pre>\n\n
- \n用途<\/strong>：這將整個文檔的默認(rèn)字體設(shè)置為“Kyiv Sans”。<\/li>\n
- \n影響<\/strong>：正文中的所有文本元素都將繼承此字體，除非被更具體的樣式覆蓋。<\/li>\n<\/ul>\n\n
定義自定義字體：<\/strong>
\n<\/p>\n\nnpm run dev\n<\/pre>\n\n\n\n\n
- \n用途<\/strong>：@font-face 規(guī)則允許您定義自定義字體。<\/li>\n
- \n字體名稱<\/strong>：字體名為“Kyiv Sans”。<\/li>\n
- \n來源<\/strong>：字體文件位于\/font\/KyivTypeSans-VarGX.ttf。<\/li>\n
- \n字體粗細(xì)范圍<\/strong>：此字體支持0到1000的粗細(xì)范圍，使其成為可變字體。<\/li>\n
- \n字體顯示<\/strong>：交換確保使用后備字體立即顯示文本，直到加載自定義字體。<\/li>\n<\/ul>\n\n
設(shè)計
樣式元素：<\/h1><\/strong>
\n<\/p>\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<\/pre>\n<ul>\n<li>\n<strong>顏色<\/strong>：將文本顏色設(shè)置為#bd0c0c，紅色陰影。<\/li>\n<li>\n<strong>高度<\/strong>：高度設(shè)置為100vh，使得<h1>元素跨越視口的整個高度。<\/h1>\n<\/li>\n<li>\n<strong>顯示<\/strong>：網(wǎng)格用于布局，允許使用網(wǎng)格屬性。<\/li>\n<li>\n<strong>居中內(nèi)容<\/strong>：位置內(nèi)容：中心使內(nèi)容垂直和水平居中。<\/li>\n<li>\n<strong>邊距<\/strong>：邊距設(shè)置為 0 以刪除 <h1> 周圍的任何默認(rèn)間距。<\/h1>\n<\/li>\n<li>\n<strong>文本對齊方式<\/strong>：文本水平居中。<\/li>\n<\/ul>\n\n<p><strong>設(shè)置 .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>字體系列<\/strong>：使用“Kyiv Sans”作為文本。<\/li>\n<li>\n<strong>字體大小<\/strong>：將字體大小設(shè)置為5rem（相對于根元素的字體大小）。<\/li>\n<li>\n<strong>行高<\/strong>：1.1 確保行之間有輕微的間距。<\/li>\n<li>\n<strong>字體粗細(xì)<\/strong>：初始設(shè)置為100。<\/li>\n<li>\n<strong>字體變體設(shè)置<\/strong>：利用可變字體的自定義變體設(shè)置：\n\n<ul>\n<li>\n'wght' 控制權(quán)重（初始為 100）。<\/li>\n<li>\n'CONT' 和 'MIDL' 是該字體的自定義軸，最初分別設(shè)置為 250 和 0。<\/li>\n<\/ul>\n\n\n<\/li>\n\n<li>\n\n<strong>過渡<\/strong>：在 500 毫秒內(nèi)平滑過渡字體變化設(shè)置。<\/li>\n\n<\/ul>\n\n<p><strong>為.variable-font添加懸停效果：<\/strong><br>\n<\/p>\n<pre>npm create vite@latest\n<\/pre>\n\n\n\n<ul>\n<li>\n<strong>懸停時的字體粗細(xì)<\/strong>：當(dāng)元素懸停在上方時更改為 1000。<\/li>\n<li>\n<strong>懸停時的字體變化設(shè)置<\/strong>：將變化設(shè)置更新為：\n\n<ul>\n<li>\n“重量”為 1000\n<\/li>\n<li>\n“繼續(xù)”仍為 250\n<\/li>\n<li>\n“MIDL”更改為-1000\n<\/li>\n<\/ul>\n\n\n<\/li>\n\n<li>\n\n<strong>效果<\/strong>：當(dāng)用戶將鼠標(biāo)懸停在文本上時創(chuàng)建動態(tài)、交互式的視覺效果，突出可變字體的靈活性。<\/li>\n\n<\/ul>\n\n<p>最后我們的結(jié)果看起來有點像這樣；<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 使用可變字體創(chuàng)建響應(yīng)式版式\n<\/h2>\n\n<p>通過允許設(shè)計師實現(xiàn)跨多種設(shè)備和屏幕尺寸的完美適應(yīng)，具有各種字體的響應(yīng)式排版改變了在線設(shè)計?？勺冏煮w具有無與倫比的多功能性，它允許在單個字體文件中不斷更改字體屬性，包括粗細(xì)、寬度和對比度。設(shè)計人員可以使用 CSS 和媒體查詢動態(tài)更改這些字體屬性，以提高可讀性和美觀性，確保文本在從桌面顯示器到手機(jī)的任何設(shè)備上呈現(xiàn)最佳效果。由于單個可變字體可以替代多個固定字體文件，因此減少了大量字體加載的需要并提高了網(wǎng)站性能。這種靈活性不僅改善了用戶體驗，還簡化了設(shè)計流程。如果沒有響應(yīng)式排版——它變得更有吸引力、更高效，并且可以使用不同的字體進(jìn)行訪問——現(xiàn)代網(wǎng)頁設(shè)計就不可能存在。<\/p>\n<h3>\n \n \n 媒體查詢：屏幕尺寸適應(yīng)大師\n<\/h3>\n\n<p>媒體查詢是響應(yīng)式網(wǎng)頁設(shè)計的基石，是屏幕尺寸適應(yīng)的大師?；谟脩粼O(shè)備的功能（例如屏幕寬度、高度、分辨率和方向），它們允許設(shè)計人員應(yīng)用特定的 CSS 樣式。媒體搜索可幫助設(shè)計人員確保網(wǎng)站在各種設(shè)備（從筆記本電腦和臺式顯示器到智能手機(jī)和平板電腦）上都能以最佳方式呈現(xiàn)和運(yùn)行。<\/p>\n\n<p>媒體查詢的強(qiáng)大之處在于它們能夠生成適合各種屏幕尺寸的靈活且流暢的布局。媒體查詢允許設(shè)計人員更改字體大小、更改網(wǎng)格布局，甚至根據(jù)視口測量隱藏或顯示某些項目。這確保了無論使用什么設(shè)備，材料都能保持其美觀性和可訪問性。<\/p>\n\n<p>媒體查詢定義斷點——布局調(diào)整以適應(yīng)不同屏幕尺寸的特定位置。針對不同的設(shè)備，這些斷點是使用 min-width、max-width 和其他 CSS 特性設(shè)置的。例如，媒體查詢可能會為 768 像素或更小的屏幕寬度指定使用適合移動設(shè)備的布局，并為較大的顯示器指定不同的布局。<\/p>\n<p>將媒體搜索納入網(wǎng)頁設(shè)計可提高可訪問性和用戶體驗。在所有平臺上，媒體查詢通過保證文本可讀、導(dǎo)航直觀且材料組織良好，有助于開發(fā)包容性數(shù)字體驗。任何希望創(chuàng)建響應(yīng)式、適應(yīng)性強(qiáng)和用戶友好的網(wǎng)站的網(wǎng)頁設(shè)計師都必須首先學(xué)習(xí)在不同設(shè)備使用時代的媒體查詢。<\/p>\n\n<p>這是一個例子：<br>\n<\/p>\n\n<pre>npm create vite@latest\n<\/pre>\n\n\n\n<p>在此示例中，我們使用媒體查詢根據(jù)屏幕尺寸調(diào)整字體變化設(shè)置和字體粗細(xì)。對于最大寬度為 600px 的設(shè)備，字體大小會減小為 3rem。針對 :hover 效果相應(yīng)調(diào)整粗細(xì)和其他變化，對于寬度在 601px 到 1200px 之間的設(shè)備，字體大小設(shè)置為 4rem，并調(diào)整粗細(xì)和變化。對于寬度為1201px及以上的設(shè)備，字體大小為5rem，保持原來的設(shè)置。<br>\n這些媒體查詢可確保字體適應(yīng)不同的屏幕尺寸，從而提高各種設(shè)備上的可讀性和用戶體驗。<\/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>上圖為小屏幕的顯示<\/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>上圖顯示了中屏幕的顯示<\/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>上圖為大屏幕顯示<\/p>\n<h3>\n \n \n 視口單位：使布局流暢\n<\/h3>\n\n<p>視口單元是現(xiàn)代網(wǎng)頁設(shè)計中的強(qiáng)大工具，可以創(chuàng)建流暢且響應(yīng)式的布局，無縫適應(yīng)不同的屏幕尺寸。視口單位包括vw（視口寬度）和vh（視口高度），它們是相對于瀏覽器視口的尺寸而言的。 1 vw 等于視口寬度的 1%，1 vh 等于視口高度的 1%。這些單元可幫助設(shè)計人員確保元素根據(jù)用戶屏幕的大小進(jìn)行縮放，從而產(chǎn)生更具動態(tài)性和適應(yīng)性的設(shè)計。例如，以視口單位設(shè)置字體大小、填充或邊距，可以讓文本和對象自動調(diào)整大小，從而在多個設(shè)備上保持一致的外觀。無論網(wǎng)站顯示在大型桌面顯示器還是小型移動屏幕上，這種適應(yīng)性都可以確保內(nèi)容保持可讀性和美觀性，從而增強(qiáng)用戶體驗。視口單元讓設(shè)計人員能夠創(chuàng)建適應(yīng)性強(qiáng)的布局，可以輕松移動以適應(yīng)數(shù)字設(shè)備不斷變化的地形。<\/p>\n\n<p>下面是如何使用 vw 根據(jù)視口寬度調(diào)整字體大小的示例：<br>\n<\/p>\n<pre>npm create vite@latest\n<\/pre>\n\n\n\n<p>在此示例中，在上面的代碼中，.variable-font 的 font-size 屬性是使用視口寬度 vw 單位設(shè)置的，使文本大小響應(yīng)于視口的寬度。<\/p>\n\n<p>我們可以將媒體搜索和具有不同字體特征的視口單元結(jié)合起來，創(chuàng)建真正響應(yīng)式的排版，優(yōu)雅地適合每種設(shè)備或屏幕尺寸。這使我們能夠提供出色的用戶體驗，而與某人為我們網(wǎng)站選擇的訪問方法無關(guān)。<\/p>\n\n<h2>\n \n \n 具有可變字體的高級印刷效果\n<\/h2>\n\n<p>可變字體開辟了復(fù)雜印刷效果的新領(lǐng)域，使設(shè)計人員能夠創(chuàng)建高度定制和動態(tài)的文本樣式。設(shè)計師現(xiàn)在可以通過不斷調(diào)整粗細(xì)、寬度和自定義軸等特性來創(chuàng)建無縫過渡和不尋常的視覺效果，而這些效果以前使用固定字體很難實現(xiàn)。可以通過調(diào)整字體動態(tài)更改粗細(xì)、對比度和中線，從而提供對文本外觀的復(fù)雜控制。這種適應(yīng)性在響應(yīng)式設(shè)計中非常強(qiáng)，字體可以輕松調(diào)整以適應(yīng)各種屏幕尺寸和方向。此外，交互式動畫允許文本響應(yīng)用戶操作，例如懸?；騿螕簦a(chǎn)生有趣和身臨其境的體驗。視口單元與不同的字體特征相結(jié)合，確保排版保持流暢和可擴(kuò)展，從而提高各種設(shè)備上的可讀性和外觀。利用這些復(fù)雜的功能，設(shè)計師可以通過擴(kuò)展傳統(tǒng)排版的可能性來創(chuàng)建視覺上引人注目的數(shù)字材料。讓我們探索一些擴(kuò)展在線排版界限的有趣方法：<\/p>\n\n<h3>\n \n \n 流體版式\n<\/h3>\n\n<p>流體排版是一種設(shè)計方法，文本可以根據(jù)視口的大小動態(tài)縮放，從而在許多設(shè)備上提供流暢且響應(yīng)靈敏的閱讀體驗。視口單元、媒體搜索和可更改的字體讓流暢的排版確保文本保持清晰和視覺平衡，與屏幕尺寸無關(guān)。此方法消除了對固定字體大小的需求，并允許無縫更改，從而以適合不同顯示條件的方式提高可讀性和外觀。<\/p>\n\n<p>這是一個例子：<br>\n<\/p>\n\n<pre>npm run dev\n<\/pre>\n\n\n\n<p>工作原理：<\/p>\n\n<p><strong>calc() 功能：<\/strong> 該函數(shù)通過組合相對單位 vw 和固定值 rem 來生成流體縮放效果。 font-size，例如，calc(2rem 2vw) 對視口寬度做出反應(yīng)并確?；境叽纭?\/p>\n\n<p><strong>各種元素的流體排版：<\/strong> 許多元素（例如 h1、h2 和 p）可以使用流體排版保證文本在不同設(shè)備上適當(dāng)縮放。 calc() 函數(shù)提供一個基本尺寸，其縮放因子隨視口寬度而變化。<\/p>\n<p><strong>可變字體：<\/strong>通過將流體排版與可變字體相結(jié)合，您可以根據(jù)視口大小實現(xiàn)文本屬性的動態(tài)變化。<br>\n此方法可保證文本在各種設(shè)備和屏幕尺寸上保持美觀和可讀。<\/p>\n\n<p>通過動畫文本，動態(tài)排版賦予文本生命，并產(chǎn)生有趣和動態(tài)的視覺效果，吸引觀眾。此方法通過使用 JavaScript 和 CSS 動畫更改文本屬性來添加運(yùn)動和交互。在使用可變字體的示例中，使用 :hover 效果對字體粗細(xì)進(jìn)行動畫處理，我們演示了動態(tài)排版，即從較淺的粗細(xì)無縫過渡到較粗的粗細(xì)。這不僅強(qiáng)調(diào)了內(nèi)容，還展示了如何通過流暢、實時的變化，改變字體可以改善用戶交互。動態(tài)排版使設(shè)計師能夠提高文本的視覺吸引力和可用性，增強(qiáng)其在交互式和有趣的數(shù)字環(huán)境中的基本作用。<\/p>\n\n<h3>\n \n \n 示例：懸停時的重量動畫\n<\/h3>\n\n\n\n<pre>npm create vite@latest\n<\/pre>\n\n\n\n<p>在這里，我們使用平滑過渡將 .variable-font 元素的粗細(xì)設(shè)置為 :hover 時從常規(guī) 100 到粗體 1000 的動畫效果，從而創(chuàng)建微妙但有影響力的效果。<\/p>\n\n<p>這些只是不同字體提供的一小部分富有想象力的機(jī)會。從動態(tài)動畫到流暢布局，有足夠的機(jī)會創(chuàng)造獨特且有趣的字體。只要有一點創(chuàng)造力和對 CSS 的理解，我們就可以挑戰(zhàn)網(wǎng)頁設(shè)計規(guī)范并產(chǎn)生相當(dāng)出色的用戶體驗。<\/p>\n\n<h2>\n \n \n 結(jié)論\n<\/h2>\n\n<p>可變字體——Kyiv Sans 的最佳演示是通過將多種字體樣式分組到一個文件中來轉(zhuǎn)換網(wǎng)絡(luò)上的版式。通過減少HTTP查詢的數(shù)量，本發(fā)明簡化了流程、增加了設(shè)計靈活性并提高了性能。設(shè)計師可以充分利用 CSS 中的可變字體來制作響應(yīng)式動態(tài)字體，完美適應(yīng)各種屏幕尺寸和用戶交互。<br>\n設(shè)計人員可以使用粗細(xì)、中間層效果和對比度等屬性以及媒體查詢和視口單元等響應(yīng)方法來創(chuàng)建視覺上吸引人且易于訪問的排版體驗。可變字體是當(dāng)代網(wǎng)頁設(shè)計的必要工具，因為它們的流動性為藝術(shù)表達(dá)提供了新的方向。<\/p>\n<h2>\n \n \n 資源\n<\/h2>\n\n<ul>\n<li>查看 Netlify 上托管的實時預(yù)覽\n<\/li>\n<li>查看源代碼<\/li>\n<\/ul>\n\n<h2>\n \n \n 參考\n<\/h2>\n\n<ul>\n<li>可變字體<\/li>\n<li>OpenType<\/li>\n<li>Kyiv Sans<\/li>\n<li>視口<\/li>\n<li>字體<\/li>\n<li>注冊軸<\/li>\n<li>自定義軸<\/li>\n<li>@font-face<\/li>\n<li>類型網(wǎng)絡(luò)<\/li>\n<li>字體松鼠<\/li>\n<li>\nAdobe 字體 <\/li>\n<li>字體彈簧<\/li>\n<li>谷歌字體<\/li>\n<li>\nVfonts.com <\/li>\n<li>ttf<\/li>\n<li>\n沃夫2 <\/li>\n<li>everythingfonts.com<\/li>\n<li>Behance.net<\/li>\n<li>媒體查詢<\/li>\n<li>px<\/li>\n<li>雷姆<\/li>\n<li>\n大眾<\/li>\n<li>\n嗯<\/li>\n<li>計算()<\/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/zh/" 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="社區(qū)" class="head_nava head_nava-template1">社區(qū)</a> <div class="377j5v51b" id="dropdown-template1" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://m.miracleart.cn/zh/article.html" title="文章" class="languagechoosea on">文章</a> <a href="http://m.miracleart.cn/zh/faq/zt" title="合集" class="languagechoosea">合集</a> <a href="http://m.miracleart.cn/zh/wenda.html" title="問答" class="languagechoosea">問答</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="學(xué)習(xí)" class="head_nava head_nava-template1_1">學(xué)習(xí)</a> <div class="377j5v51b" id="dropdown-template1_1" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://m.miracleart.cn/zh/course.html" title="課程" class="languagechoosea on">課程</a> <a href="http://m.miracleart.cn/zh/dic/" title="編程詞典" class="languagechoosea">編程詞典</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="工具庫" class="head_nava head_nava-template1_2">工具庫</a> <div class="377j5v51b" id="dropdown-template1_2" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://m.miracleart.cn/zh/toolset/development-tools" title="開發(fā)工具" class="languagechoosea on">開發(fā)工具</a> <a href="http://m.miracleart.cn/zh/toolset/website-source-code" title="網(wǎng)站源碼" class="languagechoosea">網(wǎng)站源碼</a> <a href="http://m.miracleart.cn/zh/toolset/php-libraries" title="PHP 庫" class="languagechoosea">PHP 庫</a> <a href="http://m.miracleart.cn/zh/toolset/js-special-effects" title="JS特效" class="languagechoosea on">JS特效</a> <a href="http://m.miracleart.cn/zh/toolset/website-materials" title="網(wǎng)站素材" class="languagechoosea on">網(wǎng)站素材</a> <a href="http://m.miracleart.cn/zh/toolset/extension-plug-ins" title="擴(kuò)展插件" class="languagechoosea on">擴(kuò)展插件</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="http://m.miracleart.cn/zh/ai" title="AI工具" class="head_nava head_nava-template1_3">AI工具</a> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="休閑" class="head_nava head_nava-template1_3">休閑</a> <div class="377j5v51b" id="dropdown-template1_3" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://m.miracleart.cn/zh/game" title="游戲下載" class="languagechoosea on">游戲下載</a> <a href="http://m.miracleart.cn/zh/mobile-game-tutorial/" title="游戲教程" class="languagechoosea">游戲教程</a> </div> </div> </div> </div> </div> <div id="377j5v51b" class="head_search"> <input id="key_words" onkeydown="if (event.keyCode == 13) searchs('zh')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value=""> <a href="javascript:;" title="搜索" onclick="searchs('zh')"><img src="/static/imghw/find.png" alt="搜索"></a> </div> <div id="377j5v51b" class="head_right"> <div id="377j5v51b" class="haed_language"> <a href="javascript:;" class="layui-btn haed_language_btn">簡體中文<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:;" title="簡體中文" class="languagechoosea">簡體中文</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:setlang('ms');" 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_main1L"> <div id="377j5v51b" class="Article_Details_main1Lmain" id="Article_Details_main1Lmain"> <div id="377j5v51b" class="Article_Details_main1L1">目錄</div> <div id="377j5v51b" class="Article_Details_main1L2" id="Article_Details_main1L2"> <!-- 左側(cè)懸浮，文章定位標(biāo)題1 id="Article_Details_main1L2s_1"--> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#樣式元素" title=" 樣式元素：" > 樣式元素：</a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#元素跨越視口的整個高度" title="元素跨越視口的整個高度。" >元素跨越視口的整個高度。</a> </div> <div id="377j5v51b" class="Article_Details_main1L2s "> <a href="#周圍的任何默認(rèn)間距" title=" 周圍的任何默認(rèn)間距。" > 周圍的任何默認(rèn)間距。</a> </div> </div> </div> </div> <div id="377j5v51b" class="Article_Details_main1M"> <div id="377j5v51b" class="phpgenera_Details_mainL1"> <a href="http://m.miracleart.cn/zh/" title="首頁" class="phpgenera_Details_mainL1a">首頁</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://m.miracleart.cn/zh/web-designer.html" class="phpgenera_Details_mainL1a">web前端</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://m.miracleart.cn/zh/css-tutorial.html" class="phpgenera_Details_mainL1a">css教程</a> <img src="/static/imghw/top_right.png" alt="" /> <span>動態(tài)排版的可變字體</span> </div> <div id="377j5v51b" class="Articlelist_txts"> <div id="377j5v51b" class="Articlelist_txts_info"> <h1 class="Articlelist_txts_title">動態(tài)排版的可變字體</h1> <div id="377j5v51b" class="Articlelist_txts_info_head"> <div id="377j5v51b" class="author_info"> <a href="http://m.miracleart.cn/zh/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/zh/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>您是否覺得跟蹤不同粗細(xì)和樣式的多個字體文件很乏味？對于網(wǎng)頁設(shè)計師來說，為普通、粗體、斜體和其他字體變體創(chuàng)建不同的文件可能具有挑戰(zhàn)性。這使創(chuàng)作過程變得復(fù)雜并阻礙了他們的工作流程。將所有這些變體合并到一個文件中怎么樣？</p> <p>這就是可變字體的用武之地?？勺冏煮w是 OpenType 字體技術(shù)的突破性進(jìn)步，它允許一個字體文件包含多種變體，例如常規(guī)、粗體和斜體。這意味著設(shè)計人員只需使用一個文件即可訪問他們所需的所有各種粗細(xì)、樣式和寬度。這項發(fā)明使得不斷輕松地修改重量、寬度和傾斜等特性變得簡單，從而簡化了設(shè)計過程并促進(jìn)了創(chuàng)作自由。</p> <p>以 Kyiv Sans 字體為例，本文將研究 CSS 中不同字體的相關(guān)性，并演示粗細(xì)等品質(zhì)甚至 MIDL 等非標(biāo)準(zhǔn)字體變體的重要性。使用這些工具，我們將學(xué)習(xí)如何在 CSS 中制作動態(tài)且美觀的排版。</p> <h2> 可變字體簡介 </h2> <p>可變字體技術(shù)架構(gòu)使設(shè)計人員和開發(fā)人員可以使用 CSS 立即控制這些排版特征，從而允許進(jìn)行精確的更改以滿足項目的特定要求。這通過大大降低加載時??間并用單個可變字體文件替換許多靜態(tài)字體文件來提高 Web 性能。</p> <p>可變字體的靈活性和準(zhǔn)確性是傳統(tǒng)靜態(tài)字體文件聞所未聞的，構(gòu)成了印刷技術(shù)的重大發(fā)展。傳統(tǒng)字體需要針對每種樣式和粗細(xì)的單獨文件，而可變字體則不同，它可以在一個可擴(kuò)展文件中捕獲多種樣式。這是通過 OpenType 字體樣式實現(xiàn)的，該字體樣式允許沿一個或多個軸不斷變化，例如粗細(xì)、寬度和光學(xué)尺寸。</p> <h3> CSS 中可變字體的好處 </h3> <p>我們將引導(dǎo)您了解如何使用這些工具創(chuàng)建動態(tài)且美觀的 CSS 排版。讓我們看幾個例子：</p> <p><strong>效率：</strong>通過將多種字體樣式組合到一個文件中，可變字體可以最大限度地減少 HTTP 請求，加快頁面加載速度并提高整體效率。</p> <p><strong>靈活性：</strong>設(shè)計師可以精確地修改版式以適應(yīng)不同的設(shè)計環(huán)境和用戶偏好，因為他們可以對 wght 等屬性以及 MIDL 和 CONT 等自定義屬性進(jìn)行細(xì)粒度控制。</p> <p><strong>平滑過渡：</strong>可變字體允許動態(tài)更改字體樣式，避免離散字體文件之間的突然切換。因此，字體樣式之間的過渡平滑流暢。</p> <p><strong>響應(yīng)式排版：</strong>可變字體允許根據(jù)視口大小或其他用戶定義的參數(shù)進(jìn)行調(diào)整，從而實現(xiàn)響應(yīng)式排版，確保跨設(shè)備的最佳易讀性和美觀吸引力。</p> <p><strong>動態(tài)排版：</strong>可變字體根據(jù)用戶交互或環(huán)境條件提供實時變化，因此支持動態(tài)，提高用戶參與度并產(chǎn)生身臨其境的體驗。</p> <p><strong>輔助功能：</strong>更廣泛的排版選項允許文本自定義和修改，以確?？绺鞣N設(shè)備和用戶偏好的易讀性和可讀性。</p> <p><strong>美學(xué)：</strong>在網(wǎng)絡(luò)上，可變字體激發(fā)創(chuàng)意設(shè)計理念并挑戰(zhàn)印刷界限，為印刷表達(dá)和實驗開辟新的機(jī)會。</p> <p><strong>可擴(kuò)展性：</strong>可變字體非常適合響應(yīng)式設(shè)計，并保證文本在任何尺寸或分辨率下都清晰易讀，因為它們可以在不損失質(zhì)量的情況下進(jìn)行擴(kuò)展。</p> <h3> 介紹使用可變字體的響應(yīng)式動態(tài)版式的概念 </h3> <p>現(xiàn)代網(wǎng)頁設(shè)計允許設(shè)計師使用響應(yīng)式和動態(tài)排版以及不斷變化的字體來創(chuàng)建更靈活和迷人的排版體驗，讓我們剖析這些想法：</p> <p>字體中的變量：變量字體是具有多種字體變體的單個字體文件，包括 wght 和特殊屬性 MIDL 和 CONT。與傳統(tǒng)字體相比，可變字體在版式設(shè)計中提供了更多的自由度和效率，傳統(tǒng)字體需要每種樣式都有不同的文件，并能夠在這些變體之間實現(xiàn)流暢的過渡。</p> <p><strong>響應(yīng)式排版：</strong>設(shè)計文本以輕松適應(yīng)多種屏幕尺寸、分辨率和查看環(huán)境稱為響應(yīng)式排版。從大型臺式電腦到手機(jī)以及介于兩者之間的所有設(shè)備，這保證了許多設(shè)備上的最佳可讀性和美觀性。動態(tài)字體大小、行距和其他排版更改有助于響應(yīng)式排版改善用戶體驗和可訪問性。</p> <p><strong>動態(tài)版式：</strong>動態(tài)版式通過將交互和動畫融入版式設(shè)計中來增強(qiáng)響應(yīng)式版式。 JavaScript 和 CSS（層疊樣式表）可幫助設(shè)計人員開發(fā)適合內(nèi)容更改、用戶交互或滾動行為的字體。動態(tài)排版使用 wght、MIDL 和 CONT 等組件來產(chǎn)生視覺吸引力和交互性，引導(dǎo)用戶注意力并吸引他們。</p> <p>設(shè)計師通過將動態(tài)靈活的排版方法與不同的字體相結(jié)合，創(chuàng)造出豐富、多功能、身臨其境的在線排版體驗。無論是根據(jù)用戶活動動態(tài)改變字體、動畫文本元素以突出顯示重要信息，還是根據(jù)屏幕尺寸調(diào)整字體粗細(xì)和大小，這種方法都為數(shù)字設(shè)計中的創(chuàng)造力和發(fā)明提供了許多機(jī)會。</p> <p>Kyiv Sans 的各種字體屬性允許設(shè)計師創(chuàng)建有趣且完美的印刷過渡。這通過增加網(wǎng)頁材料的審美吸引力和實用性來增強(qiáng)其交互性和用戶友好性。</p> <h2> 了解可變字體屬性 </h2> <p>各種字體提供了傳統(tǒng)靜態(tài)字體所不具備的一系列新特征。了解這些特征對于充分發(fā)揮可變字體的潛力是必要的。這些是一些基本的：</p> <p><strong>重量 (wght)：</strong> 通過沿連續(xù)軸改變重量，可變字體可以在多個厚度級別之間實現(xiàn)無縫過渡。設(shè)計師可以在單個字體文件中指定一系列粗細(xì)，從細(xì)到超粗，以及介于兩者之間的所有點。</p> <p><strong>中間層效果 (MIDL)：</strong> 此自定義軸允許設(shè)計人員更改字體內(nèi)的中間層效果。這可以賦予文本獨特的視覺風(fēng)格，以及額外的設(shè)計自由度和創(chuàng)造性。</p> <p><strong>對比度（CONT）：</strong>另一個自定義軸是CONT，它可以更改字體的對比度。通過根據(jù)設(shè)計要求動態(tài)改變對比度，這可以幫助最大限度地提高文本的可讀性和視覺吸引力。</p> <p>理解和應(yīng)用這些品質(zhì)將幫助設(shè)計師制作出視覺上引人注目的字體。憑借其不同的字體特征，Kyiv Sans 提供了特殊的自定義選擇，可提高網(wǎng)頁排版的可用性和外觀。</p> <h3> 可變字體中可用的附加軸和變體概述 </h3> <p>除了傳統(tǒng)的粗細(xì)、寬度和光學(xué)尺寸修改之外，可變字體還提供了廣泛的個性化選擇。以下是可能可用的軸和變體的摘要：</p> <p>可變字體設(shè)計者可能使用的幾個注冊軸由 OpenType 規(guī)范定義：</p> <ul> <li><p>寬度（wdth）：該軸控制字體的水平擴(kuò)展或壓縮，使設(shè)計者能夠修改字符的寬度。通過調(diào)整此軸，設(shè)計人員可以在不改變整體高度的情況下創(chuàng)建顯得更窄或更寬的字體，從而實現(xiàn)靈活的壓縮到擴(kuò)展樣式。</p></li> <li><p>傾斜（slnt）：該軸允許設(shè)計者在不改變字形結(jié)構(gòu)的情況下對字符應(yīng)用類似斜體的傾斜。斜軸通常模仿傳統(tǒng)斜體的效果，但保留直立的字母形式，使其可用于創(chuàng)建風(fēng)格變化。</p></li> <li><p>斜體（ital）：斜體軸在字體的直立和斜體版本之間切換。與僅傾斜字符的傾斜軸不同，斜體軸涉及對字符的完全重新設(shè)計，以反映真正斜體的草書性質(zhì)，提供更真實的斜體風(fēng)格。</p></li> <li><p>光學(xué)尺寸 (opsz)：該軸調(diào)整字體的設(shè)計以優(yōu)化不同尺寸下的可讀性。例如，較小的尺寸可能具有較粗的筆劃和更多的開放式計數(shù)器，以獲得更好的易讀性，而較大的尺寸可能會更加精致和精致。該軸對于跨各種媒體的響應(yīng)式排版特別有用。</p></li> <li><p>等級（GRAD）：等級軸允許對字體的筆劃粗細(xì)進(jìn)行細(xì)微調(diào)整，而不影響整體間距。它對于提高不同打印或屏幕環(huán)境中的可讀性非常有用，其中稍微增加或減少粗細(xì)可以增強(qiáng)對比度和清晰度。</p></li> <li><p>對比度 (CNTR)：此軸修改字體內(nèi)粗筆畫和細(xì)筆畫之間的對比度。通過調(diào)整對比度，設(shè)計師可以創(chuàng)建具有不同程度的強(qiáng)調(diào)和視覺沖擊力的字體，從低對比度的人文風(fēng)格到高對比度的現(xiàn)代設(shè)計。</p></li> <li><p>X 高度 (xhgt)：此軸調(diào)整小寫字母相對于字體大寫字母的高度。增加 x 高度可以提高小尺寸下的易讀性或創(chuàng)造更現(xiàn)代的外觀，而減少 x 高度可以喚起更傳統(tǒng)或正式的感覺。</p></li> </ul> <p>除了注冊的軸之外，可變字體創(chuàng)建者還可以指定自己的自定義軸。關(guān)于 Kyiv Sans：這些包括：</p> <ul> <li><p>中間層效果（MIDL）：此自定義軸為設(shè)計師提供了更多設(shè)計多功能性，并允許他們更改字體內(nèi)的特定中間層效果，從而添加原始風(fēng)格方面。</p></li> <li><p>對比度（繼續(xù)）：此自定義軸有助于控制字母形式中粗筆畫和細(xì)筆畫之間的對比度。設(shè)計師可以動態(tài)地改變這一特性，以實現(xiàn)各種程度的印刷表現(xiàn)力，從柔和的對比到更明顯的變化。</p></li> </ul> <p>除了注冊的軸之外，構(gòu)建新軸的選項還允許字體設(shè)計者實現(xiàn)對字體外觀和特征的高度定制和復(fù)雜控制。例如，MIDL 和 CONT 等自定義軸使設(shè)計人員能夠定制字體的特殊品質(zhì)，從而實現(xiàn)靈活且富有表現(xiàn)力的排版。這些自定義與可變字體注冊相結(jié)合，提供了多種方法來創(chuàng)建不同的印刷效果。例如，中間層效果（MIDL）軸允許設(shè)計師改變字體內(nèi)獨特的中間層，添加獨特的視覺品質(zhì)，從而增強(qiáng)藝術(shù)自由度。另一方面，對比度（CONT）軸控制粗筆畫和細(xì)筆畫之間的變化，允許動態(tài)調(diào)整范圍從微妙到明顯的對比度。通過與“粗細(xì)”和“中間層效果”等軸交互，設(shè)計人員可以創(chuàng)建具有不同粗細(xì)和獨特樣式的文本，從而實現(xiàn)對字體外觀的精確控制。同樣，結(jié)合粗細(xì)和對比度的變化可以創(chuàng)建具有不同程度的粗體和筆劃對比度的文本，從而平衡視覺沖擊力和可讀性。這些示例展示了注冊軸和自定義軸提供的無與倫比的自由度，使設(shè)計人員能夠根據(jù)自己特定的審美偏好和設(shè)計目標(biāo)調(diào)整字體。</p> <h2> 在 CSS 中實現(xiàn)可變字體 </h2> <p>現(xiàn)在您已經(jīng)對可更改字體的可能性著迷了，讓我們研究一下如何在基于 CSS 的 Web 項目中應(yīng)用它們。 CSS 提供了正確使用這些自適應(yīng)字體功能的方法。首先使用 @font-face 定義字體，它允許您提供不同的字體文件及其特征。設(shè)置字體后，您可以使用不同的 CSS 屬性動態(tài)更改字體的軸，從而最大化不同字體提供的可能性。</p> <h3> 獲取字體 </h3> <p>首先，我們必須下載項目所需的可變字體。<br> 互聯(lián)網(wǎng)上的一些網(wǎng)站允許我們訪問不同的字體文件。一些最常用的字體網(wǎng)站如下：</p> <ul> <li>類型網(wǎng)絡(luò)</li> <li>字體松鼠</li> <li> Adobe 字體 </li> <li>字體彈簧</li> <li>谷歌字體</li> <li>Vfonts.com</li> </ul> <p>在此示例中，我們將前往 Vfonts.com 下載 Kyiv Sans 可變字體。 ttf 或 woff2 文件格式工作正常，但我們將在本演示中使用 ttf。如果您需要將字體文件從 ttf 轉(zhuǎn)換為 woff2，請前往 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>上面的屏幕截圖顯示了您到達(dá) Vfont 時會看到的內(nèi)容。</p> <p>我們將項目分為以下幾個步驟：</p> <ol> <li><p>導(dǎo)航到 vfont：訪問提供可變字體資源的網(wǎng)站。</p></li> <li><p>選擇 Kyiv* Type：選擇 Kyiv* Type 字體，這會將您重定向到托管該字體的 Behance.net。</p></li> <li><p>訪問下載鏈接：在 Behance 頁面上，一直向下滾動以找到下載字體的鏈接。</p></li> <li><p>從 Google 云端硬盤下載：單擊下載鏈接，您將進(jìn)入 Google 云端硬盤文件夾。從那里下載字體文件。</p></li> <li><p>解壓縮文件：下載后，解壓縮文件以訪問其內(nèi)容。</p></li> <li> <p>查看字體選項：解壓后的文件夾包含多個選項可供選擇。</p> <ul> <li>圖標(biāo)</li> <li>沒有變量</li> <li>變量</li> </ul> </li> <li> <p>選擇可變字體：關(guān)注包含可變字體的文件。</p> <ul> <li>襯線</li> <li>傾斜</li> <li>Sans</li> </ul> </li> <li><p>使用 Sans 字體：設(shè)置和使用 Sans 版本的字體。請注意，Sans 字體粗細(xì)文件為 360 KB，相當(dāng)于使用八個非可變字體文件。</p></li> <li><p>評估權(quán)衡：考慮使用可變字體對于您的項目是否值得。如果您只需要常規(guī)、粗體和斜體樣式，則可能不需要使用可變字體。但是，如果您需要對變體進(jìn)行高級控制，可變字體可能非常有用。</p></li> </ol> <p>注意：以上這些文件都是TTF格式。</p> <p>現(xiàn)在我們將前往 VSCode，我們將在其中使用普通的 vite 項目。<br> 要開始處理該項目，您必須安裝必要的包。您必須按照以下步驟操作：</p> <ol> <li><p>打開一個新終端。</p></li> <li> <p>運(yùn)行命令<br> </p> <pre class="brush:php;toolbar:false">npm create vite@latest </pre> </li> <li><p>為您的項目命名。</p></li> <li><p>為您的包裹命名。</p></li> <li><p>選擇一個 Vanilla 框架。</p></li> <li><p>選擇 JavaScript 變體。</p></li> <li><p>運(yùn)行 npm install 將幫助您協(xié)商進(jìn)入項目并安裝必要的模塊。</p></li> <li> <p>設(shè)置依賴項后，使用以下命令啟動應(yīng)用程序：<br> </p> <pre class="brush:php;toolbar:false">npm run dev </pre> </li> <li><p>訪問 http://localhost:your-port-number 即可訪問瀏覽器上正在運(yùn)行的程序。</p></li> </ol> <p>一旦我們完成了我們的項目，我們將擁有大量的模擬代碼，我們可以修改它們來構(gòu)建我們想要的應(yīng)用程序。下載的可變字體應(yīng)放入字體文件夾中，該文件夾將放入公共文件夾中。我們將替換 style.css、main.js 和 index.html 中所有不必要的模擬代碼。</p> <p>index.html 代碼應(yīng)如下所示：<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>現(xiàn)在，讓我們解釋一下上面代碼中發(fā)生的事情：</p> <p><strong>設(shè)置正文的默認(rèn)字體：</strong><br> </p><pre class="brush:php;toolbar:false">npm create vite@latest </pre> </pre> <ul> <li> <strong>用途</strong>：這將整個文檔的默認(rèn)字體設(shè)置為“Kyiv Sans”。</li> <li> <strong>影響</strong>：正文中的所有文本元素都將繼承此字體，除非被更具體的樣式覆蓋。</li> </ul> <p><strong>定義自定義字體：</strong><br> </p> <pre class="brush:php;toolbar:false">npm run dev </pre> <ul> <li> <strong>用途</strong>：@font-face 規(guī)則允許您定義自定義字體。</li> <li> <strong>字體名稱</strong>：字體名為“Kyiv Sans”。</li> <li> <strong>來源</strong>：字體文件位于/font/KyivTypeSans-VarGX.ttf。</li> <li> <strong>字體粗細(xì)范圍</strong>：此字體支持0到1000的粗細(xì)范圍，使其成為可變字體。</li> <li> <strong>字體顯示</strong>：交換確保使用后備字體立即顯示文本，直到加載自定義字體。</li> </ul> <p><strong>設(shè)計 <h1 id="樣式元素"> 樣式元素：</h1></strong><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> </pre> <ul> <li> <strong>顏色</strong>：將文本顏色設(shè)置為#bd0c0c，紅色陰影。</li> <li> <strong>高度</strong>：高度設(shè)置為100vh，使得<h1 id="元素跨越視口的整個高度">元素跨越視口的整個高度。</h1> </li> <li> <strong>顯示</strong>：網(wǎng)格用于布局，允許使用網(wǎng)格屬性。</li> <li> <strong>居中內(nèi)容</strong>：位置內(nèi)容：中心使內(nèi)容垂直和水平居中。</li> <li> <strong>邊距</strong>：邊距設(shè)置為 0 以刪除 <h1 id="周圍的任何默認(rèn)間距"> 周圍的任何默認(rèn)間距。</h1> </li> <li> <strong>文本對齊方式</strong>：文本水平居中。</li> </ul> <p><strong>設(shè)置 .variable-font 類的樣式：</strong><br> </p> <pre class="brush:php;toolbar:false">body { font-family: 'Kyiv Sans'; } </pre> <ul> <li> <strong>字體系列</strong>：使用“Kyiv Sans”作為文本。</li> <li> <strong>字體大小</strong>：將字體大小設(shè)置為5rem（相對于根元素的字體大?。?/li> <li> <strong>行高</strong>：1.1 確保行之間有輕微的間距。</li> <li> <strong>字體粗細(xì)</strong>：初始設(shè)置為100。</li> <li> <strong>字體變體設(shè)置</strong>：利用可變字體的自定義變體設(shè)置： <ul> <li> 'wght' 控制權(quán)重（初始為 100）。</li> <li> 'CONT' 和 'MIDL' 是該字體的自定義軸，最初分別設(shè)置為 250 和 0。</li> </ul> </li> <li> <strong>過渡</strong>：在 500 毫秒內(nèi)平滑過渡字體變化設(shè)置。</li> </ul> <p><strong>為.variable-font添加懸停效果：</strong><br> </p> <pre class="brush:php;toolbar:false">npm create vite@latest </pre> <ul> <li> <strong>懸停時的字體粗細(xì)</strong>：當(dāng)元素懸停在上方時更改為 1000。</li> <li> <strong>懸停時的字體變化設(shè)置</strong>：將變化設(shè)置更新為： <ul> <li> “重量”為 1000 </li> <li> “繼續(xù)”仍為 250 </li> <li> “MIDL”更改為-1000 </li> </ul> </li> <li> <strong>效果</strong>：當(dāng)用戶將鼠標(biāo)懸停在文本上時創(chuàng)建動態(tài)、交互式的視覺效果，突出可變字體的靈活性。</li> </ul> <p>最后我們的結(jié)果看起來有點像這樣；<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> 使用可變字體創(chuàng)建響應(yīng)式版式 </h2> <p>通過允許設(shè)計師實現(xiàn)跨多種設(shè)備和屏幕尺寸的完美適應(yīng)，具有各種字體的響應(yīng)式排版改變了在線設(shè)計?？勺冏煮w具有無與倫比的多功能性，它允許在單個字體文件中不斷更改字體屬性，包括粗細(xì)、寬度和對比度。設(shè)計人員可以使用 CSS 和媒體查詢動態(tài)更改這些字體屬性，以提高可讀性和美觀性，確保文本在從桌面顯示器到手機(jī)的任何設(shè)備上呈現(xiàn)最佳效果。由于單個可變字體可以替代多個固定字體文件，因此減少了大量字體加載的需要并提高了網(wǎng)站性能。這種靈活性不僅改善了用戶體驗，還簡化了設(shè)計流程。如果沒有響應(yīng)式排版——它變得更有吸引力、更高效，并且可以使用不同的字體進(jìn)行訪問——現(xiàn)代網(wǎng)頁設(shè)計就不可能存在。</p> <h3> 媒體查詢：屏幕尺寸適應(yīng)大師 </h3> <p>媒體查詢是響應(yīng)式網(wǎng)頁設(shè)計的基石，是屏幕尺寸適應(yīng)的大師?；谟脩粼O(shè)備的功能（例如屏幕寬度、高度、分辨率和方向），它們允許設(shè)計人員應(yīng)用特定的 CSS 樣式。媒體搜索可幫助設(shè)計人員確保網(wǎng)站在各種設(shè)備（從筆記本電腦和臺式顯示器到智能手機(jī)和平板電腦）上都能以最佳方式呈現(xiàn)和運(yùn)行。</p> <p>媒體查詢的強(qiáng)大之處在于它們能夠生成適合各種屏幕尺寸的靈活且流暢的布局。媒體查詢允許設(shè)計人員更改字體大小、更改網(wǎng)格布局，甚至根據(jù)視口測量隱藏或顯示某些項目。這確保了無論使用什么設(shè)備，材料都能保持其美觀性和可訪問性。</p> <p>媒體查詢定義斷點——布局調(diào)整以適應(yīng)不同屏幕尺寸的特定位置。針對不同的設(shè)備，這些斷點是使用 min-width、max-width 和其他 CSS 特性設(shè)置的。例如，媒體查詢可能會為 768 像素或更小的屏幕寬度指定使用適合移動設(shè)備的布局，并為較大的顯示器指定不同的布局。</p> <p>將媒體搜索納入網(wǎng)頁設(shè)計可提高可訪問性和用戶體驗。在所有平臺上，媒體查詢通過保證文本可讀、導(dǎo)航直觀且材料組織良好，有助于開發(fā)包容性數(shù)字體驗。任何希望創(chuàng)建響應(yīng)式、適應(yīng)性強(qiáng)和用戶友好的網(wǎng)站的網(wǎng)頁設(shè)計師都必須首先學(xué)習(xí)在不同設(shè)備使用時代的媒體查詢。</p> <p>這是一個例子：<br> </p> <pre class="brush:php;toolbar:false">npm create vite@latest </pre> <p>在此示例中，我們使用媒體查詢根據(jù)屏幕尺寸調(diào)整字體變化設(shè)置和字體粗細(xì)。對于最大寬度為 600px 的設(shè)備，字體大小會減小為 3rem。針對 :hover 效果相應(yīng)調(diào)整粗細(xì)和其他變化，對于寬度在 601px 到 1200px 之間的設(shè)備，字體大小設(shè)置為 4rem，并調(diào)整粗細(xì)和變化。對于寬度為1201px及以上的設(shè)備，字體大小為5rem，保持原來的設(shè)置。<br> 這些媒體查詢可確保字體適應(yīng)不同的屏幕尺寸，從而提高各種設(shè)備上的可讀性和用戶體驗。</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>上圖為小屏幕的顯示</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>上圖顯示了中屏幕的顯示</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>上圖為大屏幕顯示</p> <h3> 視口單位：使布局流暢 </h3> <p>視口單元是現(xiàn)代網(wǎng)頁設(shè)計中的強(qiáng)大工具，可以創(chuàng)建流暢且響應(yīng)式的布局，無縫適應(yīng)不同的屏幕尺寸。視口單位包括vw（視口寬度）和vh（視口高度），它們是相對于瀏覽器視口的尺寸而言的。 1 vw 等于視口寬度的 1%，1 vh 等于視口高度的 1%。這些單元可幫助設(shè)計人員確保元素根據(jù)用戶屏幕的大小進(jìn)行縮放，從而產(chǎn)生更具動態(tài)性和適應(yīng)性的設(shè)計。例如，以視口單位設(shè)置字體大小、填充或邊距，可以讓文本和對象自動調(diào)整大小，從而在多個設(shè)備上保持一致的外觀。無論網(wǎng)站顯示在大型桌面顯示器還是小型移動屏幕上，這種適應(yīng)性都可以確保內(nèi)容保持可讀性和美觀性，從而增強(qiáng)用戶體驗。視口單元讓設(shè)計人員能夠創(chuàng)建適應(yīng)性強(qiáng)的布局，可以輕松移動以適應(yīng)數(shù)字設(shè)備不斷變化的地形。</p> <p>下面是如何使用 vw 根據(jù)視口寬度調(diào)整字體大小的示例：<br> </p> <pre class="brush:php;toolbar:false">npm create vite@latest </pre> <p>在此示例中，在上面的代碼中，.variable-font 的 font-size 屬性是使用視口寬度 vw 單位設(shè)置的，使文本大小響應(yīng)于視口的寬度。</p> <p>我們可以將媒體搜索和具有不同字體特征的視口單元結(jié)合起來，創(chuàng)建真正響應(yīng)式的排版，優(yōu)雅地適合每種設(shè)備或屏幕尺寸。這使我們能夠提供出色的用戶體驗，而與某人為我們網(wǎng)站選擇的訪問方法無關(guān)。</p> <h2> 具有可變字體的高級印刷效果 </h2> <p>可變字體開辟了復(fù)雜印刷效果的新領(lǐng)域，使設(shè)計人員能夠創(chuàng)建高度定制和動態(tài)的文本樣式。設(shè)計師現(xiàn)在可以通過不斷調(diào)整粗細(xì)、寬度和自定義軸等特性來創(chuàng)建無縫過渡和不尋常的視覺效果，而這些效果以前使用固定字體很難實現(xiàn)?？梢酝ㄟ^調(diào)整字體動態(tài)更改粗細(xì)、對比度和中線，從而提供對文本外觀的復(fù)雜控制。這種適應(yīng)性在響應(yīng)式設(shè)計中非常強(qiáng)，字體可以輕松調(diào)整以適應(yīng)各種屏幕尺寸和方向。此外，交互式動畫允許文本響應(yīng)用戶操作，例如懸?；騿螕?，產(chǎn)生有趣和身臨其境的體驗。視口單元與不同的字體特征相結(jié)合，確保排版保持流暢和可擴(kuò)展，從而提高各種設(shè)備上的可讀性和外觀。利用這些復(fù)雜的功能，設(shè)計師可以通過擴(kuò)展傳統(tǒng)排版的可能性來創(chuàng)建視覺上引人注目的數(shù)字材料。讓我們探索一些擴(kuò)展在線排版界限的有趣方法：</p> <h3> 流體版式 </h3> <p>流體排版是一種設(shè)計方法，文本可以根據(jù)視口的大小動態(tài)縮放，從而在許多設(shè)備上提供流暢且響應(yīng)靈敏的閱讀體驗。視口單元、媒體搜索和可更改的字體讓流暢的排版確保文本保持清晰和視覺平衡，與屏幕尺寸無關(guān)。此方法消除了對固定字體大小的需求，并允許無縫更改，從而以適合不同顯示條件的方式提高可讀性和外觀。</p> <p>這是一個例子：<br> </p> <pre class="brush:php;toolbar:false">npm run dev </pre> <p>工作原理：</p> <p><strong>calc() 功能：</strong> 該函數(shù)通過組合相對單位 vw 和固定值 rem 來生成流體縮放效果。 font-size，例如，calc(2rem 2vw) 對視口寬度做出反應(yīng)并確?；境叽?。</p> <p><strong>各種元素的流體排版：</strong> 許多元素（例如 h1、h2 和 p）可以使用流體排版保證文本在不同設(shè)備上適當(dāng)縮放。 calc() 函數(shù)提供一個基本尺寸，其縮放因子隨視口寬度而變化。</p> <p><strong>可變字體：</strong>通過將流體排版與可變字體相結(jié)合，您可以根據(jù)視口大小實現(xiàn)文本屬性的動態(tài)變化。<br> 此方法可保證文本在各種設(shè)備和屏幕尺寸上保持美觀和可讀。</p> <p>通過動畫文本，動態(tài)排版賦予文本生命，并產(chǎn)生有趣和動態(tài)的視覺效果，吸引觀眾。此方法通過使用 JavaScript 和 CSS 動畫更改文本屬性來添加運(yùn)動和交互。在使用可變字體的示例中，使用 :hover 效果對字體粗細(xì)進(jìn)行動畫處理，我們演示了動態(tài)排版，即從較淺的粗細(xì)無縫過渡到較粗的粗細(xì)。這不僅強(qiáng)調(diào)了內(nèi)容，還展示了如何通過流暢、實時的變化，改變字體可以改善用戶交互。動態(tài)排版使設(shè)計師能夠提高文本的視覺吸引力和可用性，增強(qiáng)其在交互式和有趣的數(shù)字環(huán)境中的基本作用。</p> <h3> 示例：懸停時的重量動畫 </h3> <pre class="brush:php;toolbar:false">npm create vite@latest </pre> <p>在這里，我們使用平滑過渡將 .variable-font 元素的粗細(xì)設(shè)置為 :hover 時從常規(guī) 100 到粗體 1000 的動畫效果，從而創(chuàng)建微妙但有影響力的效果。</p> <p>這些只是不同字體提供的一小部分富有想象力的機(jī)會。從動態(tài)動畫到流暢布局，有足夠的機(jī)會創(chuàng)造獨特且有趣的字體。只要有一點創(chuàng)造力和對 CSS 的理解，我們就可以挑戰(zhàn)網(wǎng)頁設(shè)計規(guī)范并產(chǎn)生相當(dāng)出色的用戶體驗。</p> <h2> 結(jié)論 </h2> <p>可變字體——Kyiv Sans 的最佳演示是通過將多種字體樣式分組到一個文件中來轉(zhuǎn)換網(wǎng)絡(luò)上的版式。通過減少HTTP查詢的數(shù)量，本發(fā)明簡化了流程、增加了設(shè)計靈活性并提高了性能。設(shè)計師可以充分利用 CSS 中的可變字體來制作響應(yīng)式動態(tài)字體，完美適應(yīng)各種屏幕尺寸和用戶交互。<br> 設(shè)計人員可以使用粗細(xì)、中間層效果和對比度等屬性以及媒體查詢和視口單元等響應(yīng)方法來創(chuàng)建視覺上吸引人且易于訪問的排版體驗?？勺冏煮w是當(dāng)代網(wǎng)頁設(shè)計的必要工具，因為它們的流動性為藝術(shù)表達(dá)提供了新的方向。</p> <h2> 資源 </h2> <ul> <li>查看 Netlify 上托管的實時預(yù)覽 </li> <li>查看源代碼</li> </ul> <h2> 參考 </h2> <ul> <li>可變字體</li> <li>OpenType</li> <li>Kyiv Sans</li> <li>視口</li> <li>字體</li> <li>注冊軸</li> <li>自定義軸</li> <li>@font-face</li> <li>類型網(wǎng)絡(luò)</li> <li>字體松鼠</li> <li> Adobe 字體 </li> <li>字體彈簧</li> <li>谷歌字體</li> <li> Vfonts.com </li> <li>ttf</li> <li> 沃夫2 </li> <li>everythingfonts.com</li> <li>Behance.net</li> <li>媒體查詢</li> <li>px</li> <li>雷姆</li> <li> 大眾</li> <li> 嗯</li> <li>計算()</li> </ul> <p>以上是動態(tài)排版的可變字體的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！</p> </div> </div> <div id="377j5v51b" class="wzconShengming_sp"> <div id="377j5v51b" class="bzsmdiv_sp">本站聲明</div> <div>本文內(nèi)容由網(wǎng)友自發(fā)貢獻(xiàn)，版權(quán)歸原作者所有，本站不承擔(dān)相應(yīng)法律責(zé)任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容，請聯(lián)系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>熱門文章</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/zh/faq/1796821119.html" title="指南：恒星刀片保存文件位置/保存文件丟失/不保存" class="phpgenera_Details_mainR4_bottom_title">指南：恒星刀片保存文件位置/保存文件丟失/不保存</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 周前</span> <span>By DDD</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/zh/faq/1796827210.html" title="Oguri Cap Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide |漂亮的德比志</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>2 周前</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/zh/faq/1796828723.html" title="Agnes Tachyon Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide |漂亮的德比志</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>1 周前</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/zh/faq/1796821436.html" title="沙丘：覺醒 - 高級行星學(xué)家Quest演練" class="phpgenera_Details_mainR4_bottom_title">沙丘：覺醒 - 高級行星學(xué)家Quest演練</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 周前</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/zh/faq/1796821278.html" title="約會一切：德克和哈珀關(guān)系指南" class="phpgenera_Details_mainR4_bottom_title">約會一切：德克和哈珀關(guān)系指南</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 周前</span> <span>By Jack chen</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://m.miracleart.cn/zh/article.html">顯示更多</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>熱AI工具</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_bottom"> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/zh/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/zh/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>免費(fèi)脫衣服圖片</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/zh/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/zh/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>人工智能驅(qū)動的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/zh/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/zh/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>用于從照片中去除衣服的在線人工智能工具。</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/zh/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/zh/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI脫衣機(jī)</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/zh/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/zh/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！</p> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://m.miracleart.cn/zh/ai">顯示更多</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>熱門文章</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/zh/faq/1796821119.html" title="指南：恒星刀片保存文件位置/保存文件丟失/不保存" class="phpgenera_Details_mainR4_bottom_title">指南：恒星刀片保存文件位置/保存文件丟失/不保存</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 周前</span> <span>By DDD</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/zh/faq/1796827210.html" title="Oguri Cap Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide |漂亮的德比志</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>2 周前</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/zh/faq/1796828723.html" title="Agnes Tachyon Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide |漂亮的德比志</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>1 周前</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/zh/faq/1796821436.html" title="沙丘：覺醒 - 高級行星學(xué)家Quest演練" class="phpgenera_Details_mainR4_bottom_title">沙丘：覺醒 - 高級行星學(xué)家Quest演練</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 周前</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/zh/faq/1796821278.html" title="約會一切：德克和哈珀關(guān)系指南" class="phpgenera_Details_mainR4_bottom_title">約會一切：德克和哈珀關(guān)系指南</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 周前</span> <span>By Jack chen</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://m.miracleart.cn/zh/article.html">顯示更多</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>熱工具</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_bottom"> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/zh/toolset/development-tools/92" title="記事本++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="記事本++7.3.1" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/zh/toolset/development-tools/92" title="記事本++7.3.1" class="phpmain_tab2_mids_title"> <h3>記事本++7.3.1</h3> </a> <p>好用且免費(fèi)的代碼編輯器</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/zh/toolset/development-tools/93" title="SublimeText3漢化版" 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漢化版" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/zh/toolset/development-tools/93" title="SublimeText3漢化版" class="phpmain_tab2_mids_title"> <h3>SublimeText3漢化版</h3> </a> <p>中文版，非常好用</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/zh/toolset/development-tools/121" title="禪工作室 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="禪工作室 13.0.1" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/zh/toolset/development-tools/121" title="禪工作室 13.0.1" class="phpmain_tab2_mids_title"> <h3>禪工作室 13.0.1</h3> </a> <p>功能強(qiáng)大的PHP集成開發(fā)環(huán)境</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/zh/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/zh/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"> <h3>Dreamweaver CS6</h3> </a> <p>視覺化網(wǎng)頁開發(fā)工具</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://m.miracleart.cn/zh/toolset/development-tools/500" title="SublimeText3 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 Mac版" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://m.miracleart.cn/zh/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac版</h3> </a> <p>神級代碼編輯軟件(SublimeText3)</p> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://m.miracleart.cn/zh/ai">顯示更多</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>熱門話題</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://m.miracleart.cn/zh/faq/gmailyxdlrkzn" title="gmail郵箱登陸入口在哪里" class="phpgenera_Details_mainR4_bottom_title">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/zh/faq/java-tutorial" title="Java教程" class="phpgenera_Details_mainR4_bottom_title">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>1783</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/zh/faq/cakephp-tutor" title="CakePHP 教程" class="phpgenera_Details_mainR4_bottom_title">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>1728</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/zh/faq/laravel-tutori" title="Laravel 教程" class="phpgenera_Details_mainR4_bottom_title">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>1579</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/zh/faq/php-tutorial" title="PHP教程" class="phpgenera_Details_mainR4_bottom_title">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>1443</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/zh/faq/zt">顯示更多</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/zh/faq/1796823628.html" title="什么是'渲染障礙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="什么是'渲染障礙CSS”？" /> </a> <a href="http://m.miracleart.cn/zh/faq/1796823628.html" title="什么是'渲染障礙CSS”？" class="phphistorical_Version2_mids_title">什么是'渲染障礙CSS”？</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 24, 2025 am 12:42 AM</span> <p class="Articlelist_txts_p">CSS會阻塞頁面渲染是因為瀏覽器默認(rèn)將內(nèi)聯(lián)和外部CSS視為關(guān)鍵資源，尤其是使用引入的樣式表、頭部大量內(nèi)聯(lián)CSS以及未優(yōu)化的媒體查詢樣式。1.提取關(guān)鍵CSS并內(nèi)嵌至HTML；2.延遲加載非關(guān)鍵CSS通過JavaScript；3.使用media屬性優(yōu)化加載如打印樣式；4.壓縮合并CSS減少請求。建議使用工具提取關(guān)鍵CSS，結(jié)合rel="preload"異步加載，合理使用media延遲加載，避免過度拆分與復(fù)雜腳本控制。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/zh/faq/1796822133.html" title="外部與內(nèi)部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/175035152168797.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="外部與內(nèi)部CSS：最好的方法是什么？" /> </a> <a href="http://m.miracleart.cn/zh/faq/1796822133.html" title="外部與內(nèi)部CSS：最好的方法是什么？" class="phphistorical_Version2_mids_title">外部與內(nèi)部CSS：最好的方法是什么？</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:45 AM</span> <p class="Articlelist_txts_p">thebestapphachforcssdepprodsontheproject'sspefificneeds.forlargerprojects，externalcsSissBetterDuoSmaintoMaintainability andReusability; forsMallerProjectsorsingle-pageApplications，InternaltCsmightBemoresobleable.InternalCsmightBemorese.it.it'sclucialtobalancepopryseceneceenceprodrenceprodrenceNeed</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/zh/faq/1796821588.html" title="我的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/175026415047262.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="我的CSS必須在較低的情況下嗎？" /> </a> <a href="http://m.miracleart.cn/zh/faq/1796821588.html" title="我的CSS必須在較低的情況下嗎？" class="phphistorical_Version2_mids_title">我的CSS必須在較低的情況下嗎？</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:29 AM</span> <p class="Articlelist_txts_p">否，CSSDOESNOTHAVETOBEINLOWERCASE.CHOMENDENS，使用flowercaseisrecommondendendending：1）一致性和可讀性，2）避免使用促進(jìn)性技術(shù)，3）潛在的Performent FormanceBenefits，以及4）RightCollaboraboraboraboraboraboraboraboraboraboraboraboraboraboraboraboraborationWithInteams。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/zh/faq/1796821998.html" title="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/175034936181156.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS案例靈敏度：了解重要的" /> </a> <a href="http://m.miracleart.cn/zh/faq/1796821998.html" title="CSS案例靈敏度：了解重要的" class="phphistorical_Version2_mids_title">CSS案例靈敏度：了解重要的</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:09 AM</span> <p class="Articlelist_txts_p">cssismostlycaseminemintiment，buturlsandfontfamilynamesarecase敏感。1）屬性和valueslikeColor：紅色; prenotcase-sensive.2）urlsmustmustmatchtheserver'server'scase，例如</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/zh/faq/1796828180.html" title="什么是AutoPrefixer，它如何工作？" 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="什么是AutoPrefixer，它如何工作？" /> </a> <a href="http://m.miracleart.cn/zh/faq/1796828180.html" title="什么是AutoPrefixer，它如何工作？" class="phphistorical_Version2_mids_title">什么是AutoPrefixer，它如何工作？</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:15 AM</span> <p class="Articlelist_txts_p">Autoprefixer是一個根據(jù)目標(biāo)瀏覽器范圍自動為CSS屬性添加廠商前綴的工具。1.它解決了手動維護(hù)前綴易出錯的問題；2.通過PostCSS插件形式工作，解析CSS、分析需加前綴的屬性、依配置生成代碼；3.使用步驟包括安裝插件、設(shè)置browserslist、在構(gòu)建流程中啟用；4.注意事項有不手動加前綴、保持配置更新、非所有屬性都加前綴、建議配合預(yù)處理器使用。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/zh/faq/1796821606.html" title="什么是CSS計數(shù)器？" 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="什么是CSS計數(shù)器？" /> </a> <a href="http://m.miracleart.cn/zh/faq/1796821606.html" title="什么是CSS計數(shù)器？" class="phphistorical_Version2_mids_title">什么是CSS計數(shù)器？</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:34 AM</span> <p class="Articlelist_txts_p">csscounterscanautomationallymentermentermentections和lists.1）usecounter-ensettoInitializize，反插入式發(fā)芽，andcounter（）orcounters（）</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/zh/faq/1796821580.html" title="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/175026403168895.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS：何時重要（何時不）？" /> </a> <a href="http://m.miracleart.cn/zh/faq/1796821580.html" title="CSS：何時重要（何時不）？" class="phphistorical_Version2_mids_title">CSS：何時重要（何時不）？</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:27 AM</span> <p class="Articlelist_txts_p">在CSS中，選擇器和屬性名不區(qū)分大小寫，而值、命名顏色、URL和自定義屬性則區(qū)分大小寫。1.選擇器和屬性名不區(qū)分大小寫，例如background-color和Background-Color相同。2.值中的十六進(jìn)制顏色不區(qū)分大小寫，但命名顏色區(qū)分大小寫，如red有效而Red無效。3.URL區(qū)分大小寫，可能導(dǎo)致文件加載問題。4.自定義屬性（變量）區(qū)分大小寫，使用時需注意大小寫一致。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://m.miracleart.cn/zh/faq/1796827610.html" title="什么是圓錐級函數(shù)？" 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="什么是圓錐級函數(shù)？" /> </a> <a href="http://m.miracleart.cn/zh/faq/1796827610.html" title="什么是圓錐級函數(shù)？" class="phphistorical_Version2_mids_title">什么是圓錐級函數(shù)？</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 01, 2025 am 01:16 AM</span> <p class="Articlelist_txts_p">theconic-Gradient（）functionIncsscreatesCircularGradientsThatRotateColorStopSaroundAcentralPoint.1.IsidealForPieCharts，ProgressIndicators，colordichers，colorwheels和decorativeBackgrounds.2.itworksbysbysbysbydefindefingincolordefingincolorstopsatspecificains off.</p> </div> </div> <a href="http://m.miracleart.cn/zh/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>公益在線PHP培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！</p> </div> <div id="377j5v51b" class="footermid"> <a href="http://m.miracleart.cn/zh/about/us.html">關(guān)于我們</a> <a href="http://m.miracleart.cn/zh/about/disclaimer.html">免責(zé)聲明</a> <a href="http://m.miracleart.cn/zh/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="km9zg" class="pl_css_ganrao" style="display: none;"><button id="km9zg"><pre id="km9zg"><strike id="km9zg"><tfoot id="km9zg"></tfoot></strike></pre></button><tfoot id="km9zg"><thead id="km9zg"><sup id="km9zg"></sup></thead></tfoot><progress id="km9zg"><em id="km9zg"></em></progress><listing id="km9zg"><dfn id="km9zg"><source id="km9zg"><ins id="km9zg"></ins></source></dfn></listing><rt id="km9zg"><legend id="km9zg"><pre id="km9zg"><abbr id="km9zg"></abbr></pre></legend></rt><meter id="km9zg"><menuitem id="km9zg"><rp id="km9zg"></rp></menuitem></meter><span id="km9zg"></span><big id="km9zg"></big><option id="km9zg"></option><sup id="km9zg"><option id="km9zg"></option></sup><tt id="km9zg"></tt><em id="km9zg"></em><dl id="km9zg"><blockquote id="km9zg"></blockquote></dl><table id="km9zg"></table><i id="km9zg"><tr id="km9zg"></tr></i><tr id="km9zg"><b id="km9zg"><code id="km9zg"><sup id="km9zg"></sup></code></b></tr><rt id="km9zg"><mark id="km9zg"></mark></rt><ul id="km9zg"></ul><strike id="km9zg"></strike><button id="km9zg"><pre id="km9zg"></pre></button><dl id="km9zg"><legend id="km9zg"><thead id="km9zg"></thead></legend></dl><span id="km9zg"><form id="km9zg"></form></span><strike id="km9zg"><tfoot id="km9zg"><center id="km9zg"><small id="km9zg"></small></center></tfoot></strike><tfoot id="km9zg"><tbody id="km9zg"><tt id="km9zg"><bdo id="km9zg"></bdo></tt></tbody></tfoot><nobr id="km9zg"></nobr><rt id="km9zg"><meter id="km9zg"><noframes id="km9zg"><abbr id="km9zg"></abbr></noframes></meter></rt><abbr id="km9zg"></abbr><dfn id="km9zg"><label id="km9zg"><form id="km9zg"></form></label></dfn><strong id="km9zg"><i id="km9zg"><legend id="km9zg"></legend></i></strong><strong id="km9zg"></strong><form id="km9zg"></form><pre id="km9zg"><ul id="km9zg"></ul></pre><abbr id="km9zg"><li id="km9zg"><code id="km9zg"></code></li></abbr><li id="km9zg"></li><thead id="km9zg"></thead><output id="km9zg"><nav id="km9zg"><rt id="km9zg"></rt></nav></output><ul id="km9zg"></ul><th id="km9zg"></th><object id="km9zg"></object><menuitem id="km9zg"></menuitem><menu id="km9zg"><legend id="km9zg"><menuitem id="km9zg"><mark id="km9zg"></mark></menuitem></legend></menu><button id="km9zg"></button><progress id="km9zg"></progress><pre id="km9zg"></pre><abbr id="km9zg"><dfn id="km9zg"><ol id="km9zg"></ol></dfn></abbr><code id="km9zg"><pre id="km9zg"><thead id="km9zg"><kbd id="km9zg"></kbd></thead></pre></code><kbd id="km9zg"></kbd><table id="km9zg"><thead id="km9zg"><s id="km9zg"></s></thead></table><strong id="km9zg"><span id="km9zg"><tfoot id="km9zg"></tfoot></span></strong><strong id="km9zg"><i id="km9zg"><legend id="km9zg"></legend></i></strong><small id="km9zg"></small><tfoot id="km9zg"></tfoot><acronym id="km9zg"></acronym><small id="km9zg"><dl id="km9zg"><dl id="km9zg"></dl></dl></small><acronym id="km9zg"></acronym><samp id="km9zg"><nobr id="km9zg"><nav id="km9zg"><rt id="km9zg"></rt></nav></nobr></samp><menu id="km9zg"></menu><nobr id="km9zg"></nobr><dl id="km9zg"></dl><pre id="km9zg"><label id="km9zg"></label></pre><tt id="km9zg"></tt><font id="km9zg"><dfn id="km9zg"></dfn></font><label id="km9zg"></label><strong id="km9zg"><p id="km9zg"></p></strong><label id="km9zg"></label><rt id="km9zg"></rt><address id="km9zg"><tt id="km9zg"><strong id="km9zg"></strong></tt></address><code id="km9zg"><th id="km9zg"><p id="km9zg"><pre id="km9zg"></pre></p></th></code><blockquote id="km9zg"></blockquote><center id="km9zg"><optgroup id="km9zg"></optgroup></center><bdo id="km9zg"></bdo><noframes id="km9zg"></noframes><pre id="km9zg"></pre><button id="km9zg"></button><div id="km9zg"></div><thead id="km9zg"></thead><blockquote id="km9zg"><samp id="km9zg"></samp></blockquote><th id="km9zg"></th><em id="km9zg"><u id="km9zg"></u></em><abbr id="km9zg"><strike id="km9zg"><pre id="km9zg"><sup id="km9zg"></sup></pre></strike></abbr><video id="km9zg"></video><pre id="km9zg"></pre><big id="km9zg"></big><thead id="km9zg"></thead><button id="km9zg"><option id="km9zg"><cite id="km9zg"></cite></option></button><option id="km9zg"></option><th id="km9zg"></th><dd id="km9zg"><del id="km9zg"><track id="km9zg"></track></del></dd><em id="km9zg"></em><dfn id="km9zg"></dfn><nobr id="km9zg"></nobr><optgroup id="km9zg"></optgroup><meter id="km9zg"></meter><acronym id="km9zg"></acronym><th id="km9zg"></th><font id="km9zg"><dfn id="km9zg"><u id="km9zg"></u></dfn></font><big id="km9zg"></big></div> </html>