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è)定正文的預(yù)設(shè)字體：<\/strong>
\n<\/p>npm create vite@latest\n<\/pre>\n\n\n\n<\/pre>\n\n
- \n用途<\/strong>：這將整個(gè)文件的預(yù)設(shè)字體設(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ì)範(fàn)圍<\/strong>：此字體支援0到1000的粗細(xì)範(fàn)圍，使其成為可變字體。 <\/li>\n
- \n字體顯示<\/strong>：交換確保使用後備字體立即顯示文本，直到載入自訂字體。 <\/li>\n<\/ul>\n\n
設(shè)計(jì)
樣式元素：<\/h1><\/strong>
\n<\/p>\n\n\n\n \n \n \n\nVariable font<\/title>\n <\/head>\n <body> <h1><a href="http://ipnx.cn/">亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱</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>元素跨越視口的整個(gè)高度。 <\/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> 周圍的任何預(yù)設(shè)間距。 <\/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>懸停時(shí)的字體粗細(xì)<\/strong>：當(dāng)元素懸停在上方時(shí)改為 1000。 <\/li>\n<li>\n<strong>懸停時(shí)的字體變化設(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)使用者將滑鼠停留在文字上時(shí)創(chuàng)建動(dòng)態(tài)、互動(dòng)的視覺效果，突顯可變字體的靈活性。 <\/li>\n\n<\/ul>\n\n<p>最後我們的結(jié)果看起來有點(diǎn)像這樣；<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 使用可變字體建立響應(yīng)式版式\n<\/h2>\n\n<p>透過讓設(shè)計(jì)師實(shí)現(xiàn)跨多種裝置和螢?zāi)怀叽绲耐昝肋m應(yīng)，具有各種字體的響應(yīng)式排版改變了線上設(shè)計(jì)。可變字體具有無與倫比的多功能性，它允許在單一字體檔案中不斷更改字體屬性，包括粗細(xì)、寬度和對比度。設(shè)計(jì)人員可以使用 CSS 和媒體查詢動(dòng)態(tài)更改這些字體屬性，以提高可讀性和美觀性，確保文字在從桌面顯示器到手機(jī)的任何裝置上呈現(xiàn)最佳效果。由於單一可變字體可以取代多個(gè)固定字體文件，因此減少了大量字體載入的需要並提高了網(wǎng)站效能。這種靈活性不僅改善了使用者體驗(yàn)，也簡化了設(shè)計(jì)流程。如果沒有響應(yīng)式排版——它變得更有吸引力、更有高效，並且可以使用不同的字體進(jìn)行存取——現(xiàn)代網(wǎng)頁設(shè)計(jì)就不可能存在。 <\/p>\n<h3>\n \n \n 媒體查詢：螢?zāi)怀叽邕m應(yīng)大師\n<\/h3>\n\n<p>媒體查詢是響應(yīng)式網(wǎng)頁設(shè)計(jì)的基石，是螢?zāi)怀叽邕m應(yīng)的大師?；妒褂谜咴O(shè)備的功能（例如螢?zāi)粚挾?、高度、解析度和方向），它們允許設(shè)計(jì)人員應(yīng)用特定的 CSS 樣式。媒體搜尋可協(xié)助設(shè)計(jì)人員確保網(wǎng)站在各種裝置（從筆記型電腦和桌上型顯示器到智慧型手機(jī)和平板電腦）上都能以最佳方式呈現(xiàn)和運(yùn)作。 <\/p>\n\n<p>媒體查詢的強(qiáng)大之處在於它們能夠產(chǎn)生適合各種螢?zāi)怀叽绲撵`活且流暢的佈局。媒體查詢允許設(shè)計(jì)人員更改字體大小、更改網(wǎng)格佈局，甚至根據(jù)視窗測量隱藏或顯示某些項(xiàng)目。這確保了無論使用什麼設(shè)備，材料都能保持其美觀性和可訪問性。 <\/p>\n\n<p>媒體查詢定義斷點(diǎn)－佈局調(diào)整以適應(yīng)不同螢?zāi)怀叽绲奶囟ㄎ恢谩ａ槍Σ煌脑O(shè)備，這些斷點(diǎn)是使用 min-width、max-width 和其他 CSS 特性設(shè)定的。例如，媒體查詢可能會(huì)為 768 像素或更小的螢?zāi)粚挾戎付ㄊ褂眠m合行動(dòng)裝置的佈局，並為較大的顯示器指定不同的佈局。 <\/p>\n<p>將媒體搜尋納入網(wǎng)頁設(shè)計(jì)可提高可近性和使用者體驗(yàn)。在所有平臺(tái)上，媒體查詢透過保證文字可讀、導(dǎo)航直觀且材料組織良好，有助於開發(fā)包容性數(shù)位體驗(yàn)。任何希望創(chuàng)建響應(yīng)式、適應(yīng)性強(qiáng)和用戶友好的網(wǎng)站的網(wǎng)頁設(shè)計(jì)師都必須先學(xué)習(xí)在不同裝置使用時(shí)代的媒體查詢。 <\/p>\n\n<p>這是一個(gè)例子：<br>\n<\/p>\n\n<pre>npm create vite@latest\n<\/pre>\n\n\n\n<p>在此範(fàn)例中，我們使用媒體查詢根據(jù)螢?zāi)怀叽缯{(diào)整字體變化設(shè)定和字體粗細(xì)。對於最大寬度為 600px 的設(shè)備，字體大小會(huì)減少為 3rem。針對 :hover 效果相應(yīng)調(diào)整粗細(xì)和其他變化，對於寬度在 601px 到 1200px 之間的設(shè)備，字體大小設(shè)定為 4rem，並調(diào)整粗細(xì)和變化。對於寬度為1201px及以上的設(shè)備，字體大小為5rem，保持原來的設(shè)定。 <br>\n這些媒體查詢可確保字體適應(yīng)不同的螢?zāi)怀叽?，從而提高各種裝置上的可讀性和使用者體驗(yàn)。 <\/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>上圖為小螢?zāi)坏娘@示<\/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>上圖顯示了中螢?zāi)坏娘@示<\/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>上圖為大螢?zāi)伙@示<\/p>\n<h3>\n \n \n 視口單位：使佈局流暢\n<\/h3>\n\n<p>視窗單元是現(xiàn)代網(wǎng)頁設(shè)計(jì)中的強(qiáng)大工具，可以創(chuàng)建流暢且響應(yīng)式的佈局，無縫適應(yīng)不同的螢?zāi)怀叽?。視口單位包括vw（視口寬度）和vh（視口高度），它們是相對於瀏覽器視窗的尺寸而言的。 1 vw 等於視口寬度的 1%，1 vh 等於視口高度的 1%。這些單元可協(xié)助設(shè)計(jì)人員確保元素根據(jù)使用者螢?zāi)坏拇笮∵M(jìn)行縮放，從而產(chǎn)生更具動(dòng)態(tài)性和適應(yīng)性的設(shè)計(jì)。例如，以視窗單位設(shè)定字體大小、填滿或邊距，可以讓文字和物件自動(dòng)調(diào)整大小，從而在多個(gè)裝置上保持一致的外觀。無論網(wǎng)站顯示在大型桌面顯示器或小型行動(dòng)螢?zāi)簧?，這種適應(yīng)性都可以確保內(nèi)容保持可讀性和美觀性，從而增強(qiáng)用戶體驗(yàn)。視口單元讓設(shè)計(jì)人員能夠創(chuàng)建適應(yīng)性強(qiáng)的佈局，可以輕鬆移動(dòng)以適應(yīng)數(shù)位設(shè)備不斷變化的地形。 <\/p>\n\n<p>以下是如何使用 vw 根據(jù)視窗寬度調(diào)整字體大小的範(fàn)例：<br>\n<\/p>\n<pre>npm create vite@latest\n<\/pre>\n\n\n\n<p>在此範(fàn)例中，在上面的程式碼中，.variable-font 的 font-size 屬性是使用視窗寬度 vw 單位設(shè)定的，使文字大小響應(yīng)於視窗的寬度。 <\/p>\n\n<p>我們可以將媒體搜尋和具有不同字體特徵的視口單元結(jié)合起來，創(chuàng)建真正響應(yīng)式的排版，優(yōu)雅地適合每種設(shè)備或螢?zāi)怀叽?。這使我們能夠提供出色的用戶體驗(yàn)，而與某人為我們網(wǎng)站選擇的存取方法無關(guān)。 <\/p>\n\n<h2>\n \n \n 具有可變字體的高級印刷效果\n<\/h2>\n\n<p>可變字體開啟了複雜印刷效果的新領(lǐng)域，使設(shè)計(jì)人員能夠創(chuàng)建高度客製化和動(dòng)態(tài)的文字樣式。設(shè)計(jì)師現(xiàn)在可以透過不斷調(diào)整粗細(xì)、寬度和自訂軸等特性來創(chuàng)建無縫過渡和不尋常的視覺效果，而這些效果以前使用固定字體很難實(shí)現(xiàn)。可以透過調(diào)整字體動(dòng)態(tài)來變更粗細(xì)、對比度和中線，從而提供對文字外觀的複雜控制。這種適應(yīng)性在響應(yīng)式設(shè)計(jì)中非常強(qiáng)，字體可以輕鬆調(diào)整以適應(yīng)各種螢?zāi)怀叽绾头较?。此外，互?dòng)式動(dòng)畫允許文字響應(yīng)用戶操作，例如懸?；騿螕簦a(chǎn)生有趣和身臨其境的體驗(yàn)。視窗單元與不同的字體特徵相結(jié)合，確保排版保持流暢和可擴(kuò)展，從而提高各種設(shè)備上的可讀性和外觀。利用這些複雜的功能，設(shè)計(jì)師可以透過擴(kuò)展傳統(tǒng)排版的可能性來創(chuàng)建視覺上引人注目的數(shù)位材料。讓我們來探索一些擴(kuò)展線上排版界限的有趣方法：<\/p>\n\n<h3>\n \n \n 流體版式\n<\/h3>\n\n<p>流體排版是一種設(shè)計(jì)方法，文字可以根據(jù)視口的大小動(dòng)態(tài)縮放，從而在許多裝置上提供流暢且響應(yīng)靈敏的閱讀體驗(yàn)。視窗單元、媒體搜尋和可變更的字體讓流暢的排版確保文字保持清晰和視覺平衡，與螢?zāi)怀叽鐭o關(guān)。此方法消除了對固定字體大小的需求，並允許無縫更改，從而以適合不同顯示條件的方式提高可讀性和外觀。 <\/p>\n\n<p>這是一個(gè)例子：<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 來產(chǎn)生流體縮放效果。 font-size，例如，calc(2rem 2vw) 會(huì)對視窗寬度做出反應(yīng)並確?；境叽?。 <\/p>\n\n<p><strong>各種元素的流體排版：<\/strong> 許多元素（例如 h1、h2 和 p）可以使用流體排版保證文字在不同設(shè)備上適當(dāng)縮放。 calc() 函數(shù)提供一個(gè)基本尺寸，其縮放因子隨視窗寬度而變化。 <\/p>\n<p><strong>可變字體：<\/strong>將流體排版與可變字體結(jié)合，您可以根據(jù)視口大小實(shí)現(xiàn)文字屬性的動(dòng)態(tài)變化。 <br>\n此方法可確保文字在各種裝置和螢?zāi)怀叽缟媳３置烙^和可讀性。 <\/p>\n\n<p>透過動(dòng)畫文本，動(dòng)態(tài)排版賦予文本生命，並產(chǎn)生有趣和動(dòng)態(tài)的視覺效果，吸引觀眾。此方法透過使用 JavaScript 和 CSS 動(dòng)畫更改文字屬性來添加運(yùn)動(dòng)和互動(dòng)。在使用可變字體的範(fàn)例中，使用 :hover 效果對字體粗細(xì)進(jìn)行動(dòng)畫處理，我們示範(fàn)了動(dòng)態(tài)排版，即從較淺的粗細(xì)無縫過渡到較粗的粗細(xì)。這不僅強(qiáng)調(diào)了內(nèi)容，還展示瞭如何透過流暢、即時(shí)的變化，改變字體可以改善使用者互動(dòng)。動(dòng)態(tài)排版使設(shè)計(jì)師能夠提高文字的視覺吸引力和可用性，增強(qiáng)其在互動(dòng)式和有趣的數(shù)位環(huán)境中的基本作用。 <\/p>\n\n<h3>\n \n \n 例：懸停時(shí)的重量動(dòng)畫\n<\/h3>\n\n\n\n<pre>npm create vite@latest\n<\/pre>\n\n\n\n<p>在這裡，我們使用平滑過渡將 .variable-font 元素的粗細(xì)設(shè)定為 :hover 時(shí)從常規(guī) 100 到粗體 1000 的動(dòng)畫效果，從而創(chuàng)建微妙但有影響力的效果。 <\/p>\n\n<p>這些只是不同字體提供的一小部分富有想像的機(jī)會(huì)。從動(dòng)態(tài)動(dòng)畫到流暢佈局，有足夠的機(jī)會(huì)創(chuàng)造獨(dú)特且有趣的字體。只要有一點(diǎn)創(chuàng)意和對 CSS 的理解，我們就可以挑戰(zhàn)網(wǎng)頁設(shè)計(jì)規(guī)範(fàn)並產(chǎn)生相當(dāng)出色的使用者體驗(yàn)。 <\/p>\n\n<h2>\n \n \n 結(jié)論\n<\/h2>\n\n<p>可變字體－Kyiv Sans 的最佳示範(fàn)是透過將多種字體樣式分組到一個(gè)檔案中來轉(zhuǎn)換網(wǎng)路上的版式。透過減少HTTP查詢的數(shù)量，本發(fā)明簡化了流程、增加了設(shè)計(jì)靈活性並提高了效能。設(shè)計(jì)師可以充分利用 CSS 中的可變字體來製作響應(yīng)式動(dòng)態(tài)字體，完美適應(yīng)各種螢?zāi)怀叽绾褪褂谜呋?dòng)。 <br>\n設(shè)計(jì)人員可以使用粗細(xì)、中間層效果和對比度等屬性以及媒體查詢和視口單元等回應(yīng)方法來創(chuàng)建視覺上吸引人且易於存取的排版體驗(yàn)?？勺冏煮w是當(dāng)代網(wǎng)頁設(shè)計(jì)的必要工具，因?yàn)樗鼈兊牧鲃?dòng)性為藝術(shù)表達(dá)提供了新的方向。 <\/p>\n<h2>\n \n \n 資源\n<\/h2>\n\n<ul>\n<li>查看 Netlify 上託管的即時(shí)預(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)路<\/li>\n<li>字體松鼠<\/li>\n<li>\nAdobe 字型 <\/li>\n<li>字體彈簧<\/li>\n<li>Google字體<\/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>計(jì)算()<\/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="wjcelcm34c" class="head"> <div id="wjcelcm34c" class="haed_left"> <div id="wjcelcm34c" class="haed_logo"> <a href="http://ipnx.cn/zh-tw/" title="" class="haed_logo_a"> <img src="/static/imghw/logo.png" alt="" class="haed_logoimg"> </a> </div> <div id="wjcelcm34c" class="head_nav"> <div id="wjcelcm34c" class="head_navs"> <a href="javascript:;" title="社群" class="head_nava head_nava-template1">社群</a> <div class="wjcelcm34c" id="dropdown-template1" style="display: none;"> <div id="wjcelcm34c" class="languagechoose"> <a href="http://ipnx.cn/zh-tw/article.html" title="文章" class="languagechoosea on">文章</a> <a href="http://ipnx.cn/zh-tw/faq/zt" title="合集" class="languagechoosea">合集</a> <a href="http://ipnx.cn/zh-tw/wenda.html" title="問答" class="languagechoosea">問答</a> </div> </div> </div> <div id="wjcelcm34c" class="head_navs"> <a href="javascript:;" title="學(xué)習(xí)" class="head_nava head_nava-template1_1">學(xué)習(xí)</a> <div class="wjcelcm34c" id="dropdown-template1_1" style="display: none;"> <div id="wjcelcm34c" class="languagechoose"> <a href="http://ipnx.cn/zh-tw/course.html" title="課程" class="languagechoosea on">課程</a> <a href="http://ipnx.cn/zh-tw/dic/" title="程式設(shè)計(jì)字典" class="languagechoosea">程式設(shè)計(jì)字典</a> </div> </div> </div> <div id="wjcelcm34c" class="head_navs"> <a href="javascript:;" title="工具庫" class="head_nava head_nava-template1_2">工具庫</a> <div class="wjcelcm34c" id="dropdown-template1_2" style="display: none;"> <div id="wjcelcm34c" class="languagechoose"> <a href="http://ipnx.cn/zh-tw/toolset/development-tools" title="開發(fā)工具" class="languagechoosea on">開發(fā)工具</a> <a href="http://ipnx.cn/zh-tw/toolset/website-source-code" title="網(wǎng)站源碼" class="languagechoosea">網(wǎng)站源碼</a> <a href="http://ipnx.cn/zh-tw/toolset/php-libraries" title="PHP 函式庫" class="languagechoosea">PHP 函式庫</a> <a href="http://ipnx.cn/zh-tw/toolset/js-special-effects" title="JS特效" class="languagechoosea on">JS特效</a> <a href="http://ipnx.cn/zh-tw/toolset/website-materials" title="網(wǎng)站素材" class="languagechoosea on">網(wǎng)站素材</a> <a href="http://ipnx.cn/zh-tw/toolset/extension-plug-ins" title="擴(kuò)充插件" class="languagechoosea on">擴(kuò)充插件</a> </div> </div> </div> <div id="wjcelcm34c" class="head_navs"> <a href="http://ipnx.cn/zh-tw/ai" title="AI工具" class="head_nava head_nava-template1_3">AI工具</a> </div> <div id="wjcelcm34c" class="head_navs"> <a href="javascript:;" title="休閒" class="head_nava head_nava-template1_3">休閒</a> <div class="wjcelcm34c" id="dropdown-template1_3" style="display: none;"> <div id="wjcelcm34c" class="languagechoose"> <a href="http://ipnx.cn/zh-tw/game" title="遊戲下載" class="languagechoosea on">遊戲下載</a> <a href="http://ipnx.cn/zh-tw/mobile-game-tutorial/" title="遊戲教程" class="languagechoosea">遊戲教程</a> </div> </div> </div> </div> </div> <div id="wjcelcm34c" class="head_search"> <input id="key_words" onkeydown="if (event.keyCode == 13) searchs('zh-tw')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value=""> <a href="javascript:;" title="搜尋" onclick="searchs('zh-tw')"><img src="/static/imghw/find.png" alt="搜尋"></a> </div> <div id="wjcelcm34c" class="head_right"> <div id="wjcelcm34c" class="haed_language"> <a href="javascript:;" class="layui-btn haed_language_btn">繁體中文<i class="layui-icon layui-icon-triangle-d"></i></a> <div class="wjcelcm34c" id="dropdown-template" style="display: none;"> <div id="wjcelcm34c" class="languagechoose"> <a href="javascript:setlang('zh-cn');" title="簡體中文" class="languagechoosea">簡體中文</a> <a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a> <a href="javascript:;" 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="wjcelcm34c" 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="wjcelcm34c" class="Article_Details_main"> <div id="wjcelcm34c" class="Article_Details_main1"> <div id="wjcelcm34c" class="Article_Details_main1L"> <div id="wjcelcm34c" class="Article_Details_main1Lmain" id="Article_Details_main1Lmain"> <div id="wjcelcm34c" class="Article_Details_main1L1">目錄</div> <div id="wjcelcm34c" class="Article_Details_main1L2" id="Article_Details_main1L2"> <!-- 左側(cè)懸浮，文章定位標(biāo)題1 id="Article_Details_main1L2s_1"--> <div id="wjcelcm34c" class="Article_Details_main1L2s "> <a href="#樣式元素" title=" 樣式元素：" > 樣式元素：</a> </div> <div id="wjcelcm34c" class="Article_Details_main1L2s "> <a href="#元素跨越視口的整個(gè)高度" title="元素跨越視口的整個(gè)高度。 " >元素跨越視口的整個(gè)高度。 </a> </div> <div id="wjcelcm34c" class="Article_Details_main1L2s "> <a href="#周圍的任何預(yù)設(shè)間距" title=" 周圍的任何預(yù)設(shè)間距。 " > 周圍的任何預(yù)設(shè)間距。 </a> </div> </div> </div> </div> <div id="wjcelcm34c" class="Article_Details_main1M"> <div id="wjcelcm34c" class="phpgenera_Details_mainL1"> <a href="http://ipnx.cn/zh-tw/" title="首頁" class="phpgenera_Details_mainL1a">首頁</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://ipnx.cn/zh-tw/web-designer.html" class="phpgenera_Details_mainL1a">web前端</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://ipnx.cn/zh-tw/css-tutorial.html" class="phpgenera_Details_mainL1a">css教學(xué)</a> <img src="/static/imghw/top_right.png" alt="" /> <span>動(dòng)態(tài)排版的可變字體</span> </div> <div id="wjcelcm34c" class="Articlelist_txts"> <div id="wjcelcm34c" class="Articlelist_txts_info"> <h1 class="Articlelist_txts_title">動(dòng)態(tài)排版的可變字體</h1> <div id="wjcelcm34c" class="Articlelist_txts_info_head"> <div id="wjcelcm34c" class="author_info"> <a href="http://ipnx.cn/zh-tw/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="wjcelcm34c" class="author_detail"> <a href="http://ipnx.cn/zh-tw/member/1468490.html" class="author_name">Barbara Streisand</a> </div> </div> </div> <span id="wjcelcm34c" class="Articlelist_txts_time">Dec 09, 2024 pm 02:59 PM</span> </div> </div> <hr /> <div id="wjcelcm34c" class="article_main php-article"> <div id="wjcelcm34c" 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ì)和樣式的多個(gè)字體檔案很乏味？對於網(wǎng)頁設(shè)計(jì)師來說，為普通、粗體、斜體和其他字體變體創(chuàng)建不同的文件可能具有挑戰(zhàn)性。這使創(chuàng)作過程變得複雜並阻礙了他們的工作流程。將所有這些變體合併到一個(gè)文件中怎麼樣？ </p> <p>這就是可變字體的用武之地。可變字體是 OpenType 字體技術(shù)的突破性進(jìn)步，它允許一個(gè)字體檔案包含多種變體，例如常規(guī)、粗體和斜體。這意味著設(shè)計(jì)人員只需使用一個(gè)文件即可存取他們所需的所有各種粗細(xì)、樣式和寬度。這項(xiàng)發(fā)明使得不斷輕鬆地修改重量、寬度和傾斜等特性變得簡單，從而簡化了設(shè)計(jì)過程並促進(jìn)了創(chuàng)作自由。 </p> <p>以 Kyiv Sans 字體為例，本文將研究 CSS 中不同字體的相關(guān)性，並展示粗細(xì)等品質(zhì)甚至 MIDL 等非標(biāo)準(zhǔn)字體變體的重要性。使用這些工具，我們將學(xué)習(xí)如何在 CSS 中製作動(dòng)態(tài)且美觀的排版。 </p> <h2> 可變字體簡介 </h2> <p>可變字體技術(shù)架構(gòu)使設(shè)計(jì)人員和開發(fā)人員可以使用 CSS 立即控制這些排版特徵，從而允許精確的更改以滿足專案的特定要求。這透過大幅降低載入時(shí)間並用單一可變字體檔案替換許多靜態(tài)字體檔案來提高 Web 效能。 </p> <p>可變字體的靈活性和準(zhǔn)確性是傳統(tǒng)靜態(tài)字體文件聞所未聞的，構(gòu)成了印刷技術(shù)的重大發(fā)展。傳統(tǒng)字體需要針對每種樣式和粗細(xì)的單獨(dú)文件，而可變字體則不同，它可以在一個(gè)可擴(kuò)展文件中捕獲多種樣式。這是透過 OpenType 字體樣式實(shí)現(xiàn)的，該字體樣式允許沿著一個(gè)或多個(gè)軸不斷變化，例如粗細(xì)、寬度和光學(xué)尺寸。 </p> <h3> CSS 中可變字體的好處 </h3> <p>我們將引導(dǎo)您了解如何使用這些工具建立動(dòng)態(tài)且美觀的 CSS 排版。讓我們來看幾個(gè)例子：</p> <p><strong>效率：</strong>透過將多種字體樣式組合到一個(gè)檔案中，可變字體可以最大限度地減少 HTTP 請求，加快頁面載入速度並提高整體效率。 </p> <p><strong>靈活性：</strong>設(shè)計(jì)師可以精確地修改版式以適應(yīng)不同的設(shè)計(jì)環(huán)境和使用者偏好，因?yàn)樗麄兛梢詫?wght 等屬性以及 MIDL 和 CONT 等自訂屬性進(jìn)行細(xì)粒度控制。 </p> <p><strong>平滑過渡：</strong>可變字體允許動(dòng)態(tài)更改字體樣式，避免離散字體檔案之間的突然切換。因此，字體樣式之間的過渡平滑流暢。 </p> <p><strong>響應(yīng)式排版：</strong>可變字體允許根據(jù)視口大小或其他使用者定義的參數(shù)進(jìn)行調(diào)整，從而實(shí)現(xiàn)響應(yīng)式排版，確?？缪b置的最佳易讀性和美觀吸引力。 </p> <p><strong>動(dòng)態(tài)排版：</strong>可變字體根據(jù)使用者互動(dòng)或環(huán)境條件提供即時(shí)變化，因此支援動(dòng)態(tài)，提高使用者參與度並產(chǎn)生身臨其境的體驗(yàn)。 </p> <p><strong>輔助功能：</strong>更廣泛的排版選項(xiàng)允許文字自訂和修改，以確保跨各種裝置和使用者偏好的易讀性和可讀性。 </p> <p><strong>美學(xué)：</strong>在網(wǎng)路上，可變字體激發(fā)創(chuàng)意設(shè)計(jì)理念並挑戰(zhàn)印刷界限，為印刷表達(dá)和實(shí)驗(yàn)開闢新的機(jī)會(huì)。 </p> <p><strong>可擴(kuò)展性：</strong>可變字體非常適合響應(yīng)式設(shè)計(jì)，並保證文字在任何尺寸或解析度下都清晰易讀，因?yàn)樗鼈兛梢栽诓粨p失品質(zhì)的情況下進(jìn)行擴(kuò)展。 </p> <h3> 介紹使用可變字體的響應(yīng)式動(dòng)態(tài)版式的概念 </h3> <p>現(xiàn)代網(wǎng)頁設(shè)計(jì)允許設(shè)計(jì)師使用響應(yīng)式和動(dòng)態(tài)排版以及不斷變化的字體來創(chuàng)建更靈活和迷人的排版體驗(yàn)，讓我們剖析這些想法：</p> <p>字體中的變數(shù)：變數(shù)字體是具有多種字體變體的單一字體文件，包括 wght 和特殊屬性 MIDL 和 CONT。與傳統(tǒng)字體相比，可變字體在版式設(shè)計(jì)中提供了更多的自由度和效率，傳統(tǒng)字體需要每種樣式都有不同的文件，並能夠在這些變體之間實(shí)現(xiàn)流暢的過渡。 </p> <p><strong>響應(yīng)式排版：</strong>設(shè)計(jì)文字以輕鬆適應(yīng)多種螢?zāi)怀叽?、解析度和檢視環(huán)境稱為響應(yīng)式排版。從大型桌上型電腦到手機(jī)以及介於兩者之間的所有設(shè)備，這保證了許多設(shè)備上的最佳可讀性和美觀性。動(dòng)態(tài)字體大小、行距和其他排版變更有助於響應(yīng)式排版改善使用者體驗(yàn)和可存取性。 </p> <p><strong>動(dòng)態(tài)版式：</strong>動(dòng)態(tài)版式透過將互動(dòng)和動(dòng)畫融入版式設(shè)計(jì)來增強(qiáng)響應(yīng)式版式。 JavaScript 和 CSS（層疊樣式表）可協(xié)助設(shè)計(jì)人員開發(fā)適合內(nèi)容變更、使用者互動(dòng)或捲動(dòng)行為的字體。動(dòng)態(tài)排版使用 wght、MIDL 和 CONT 等組件來產(chǎn)生視覺吸引力和互動(dòng)性，引導(dǎo)使用者註意力並吸引他們。 </p> <p>設(shè)計(jì)師透過將動(dòng)態(tài)靈活的排版方法與不同的字體結(jié)合，創(chuàng)造出豐富、多功能、身臨其境的線上排版體驗(yàn)。無論是根據(jù)使用者活動(dòng)動(dòng)態(tài)改變字體、動(dòng)畫文字元素以突出顯示重要訊息，還是根據(jù)螢?zāi)怀叽缯{(diào)整字體粗細(xì)和大小，這種方法都為數(shù)位設(shè)計(jì)中的創(chuàng)造力和發(fā)明提供了許多機(jī)會(huì)。 </p> <p>Kyiv Sans 的各種字體屬性允許設(shè)計(jì)師創(chuàng)建有趣且完美的印刷過渡。這透過增加網(wǎng)頁資料的美學(xué)吸引力和實(shí)用性來增強(qiáng)其互動(dòng)性和用戶友善性。 </p> <h2> 了解可變字體屬性 </h2> <p>各種字體提供了傳統(tǒng)靜態(tài)字體所不具備的一系列新特徵。了解這些特徵對於充分發(fā)揮可變字體的潛力是必要的。這些是一些基本的：</p> <p><strong>重量 (wght)：</strong> 沿著連續(xù)軸改變重量，可變字體可以在多個(gè)厚度等級之間實(shí)現(xiàn)無縫過渡。設(shè)計(jì)師可以在單一字體檔案中指定一系列粗細(xì)，從細(xì)到超粗，以及介於兩者之間的所有點(diǎn)。 </p> <p><strong>中間層效果 (MIDL)：</strong> 此自訂軸可讓設(shè)計(jì)人員變更字體內(nèi)的中間層效果。這可以賦予文字獨(dú)特的視覺風(fēng)格，以及額外的設(shè)計(jì)自由和創(chuàng)造力。 </p> <p><strong>對比（CONT）：</strong>另一個(gè)自訂軸是CONT，它可以改變字體的對比。透過根據(jù)設(shè)計(jì)要求動(dòng)態(tài)改變對比度，這可以幫助最大限度地提高文字的可讀性和視覺吸引力。 </p> <p>理解和應(yīng)用這些特質(zhì)將幫助設(shè)計(jì)師製作出視覺上引人注目的字體。憑藉其不同的字體特徵，Kyiv Sans 提供了特殊的自訂選擇，可提高網(wǎng)頁排版的可用性和外觀。 </p> <h3> 可變字體中可用的附加軸和變體概述 </h3> <p>除了傳統(tǒng)的粗細(xì)、寬度和光學(xué)尺寸修改之外，可變字體還提供了廣泛的個(gè)人化選擇。以下是可能可用的軸和變體的摘要：</p> <p>可變字體設(shè)計(jì)者可能使用的幾個(gè)註冊軸由 OpenType 規(guī)格定義：</p> <ul> <li><p>寬度（wdth）：此軸控製字體的水平擴(kuò)展或壓縮，使設(shè)計(jì)者能夠修改字元的寬度。透過調(diào)整此軸，設(shè)計(jì)人員可以在不改變整體高度的情況下創(chuàng)建顯得更窄或更寬的字體，從而實(shí)現(xiàn)靈活的壓縮到擴(kuò)展樣式。 </p></li> <li><p>傾斜（slnt）：此軸允許設(shè)計(jì)者在不改變字形結(jié)構(gòu)的情況下對字元應(yīng)用類似斜體的傾斜。斜軸通常模仿傳統(tǒng)斜體的效果，但保留直立的字母形式，使其可用於創(chuàng)建風(fēng)格變化。 </p></li> <li><p>斜體（ital）：斜體軸在字體的直立和斜體版本之間切換。與僅傾斜字符的傾斜軸不同，斜體軸涉及字符的完全重新設(shè)計(jì)，以反映真正斜體的草書性質(zhì)，提供更真實(shí)的斜體風(fēng)格。 </p></li> <li><p>光學(xué)尺寸 (opsz)：此軸調(diào)整字體的設(shè)計(jì)以優(yōu)化不同尺寸下的可讀性。例如，較小的尺寸可能具有較粗的筆劃和更多的開放式計(jì)數(shù)器，以獲得更好的易讀性，而較大的尺寸可能會(huì)更加精緻和精緻。該軸對於跨各種媒體的響應(yīng)式排版特別有用。 </p></li> <li><p>等級（GRAD）：等級軸允許對字體的筆劃粗細(xì)進(jìn)行細(xì)微調(diào)整，而不影響整體間距。它對於提高不同列印或螢?zāi)画h(huán)境中的可讀性非常有用，其中稍微增加或減少粗細(xì)可以增強(qiáng)對比度和清晰度。 </p></li> <li><p>對比 (CNTR)：此軸修改字體內(nèi)粗筆畫和細(xì)筆畫之間的對比。透過調(diào)整對比度，設(shè)計(jì)師可以創(chuàng)造具有不同程度的強(qiáng)調(diào)和視覺衝擊力的字體，從低對比的人文風(fēng)格到高對比度的現(xiàn)代設(shè)計(jì)。 </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è)計(jì)師提供了更多設(shè)計(jì)多功能性，並允許他們更改字體內(nèi)的特定中間層效果，從而添加原始風(fēng)格方面。 </p></li> <li><p>對比（繼續(xù)）：此自訂軸有助於控製字母形式中粗筆畫和細(xì)筆畫之間的對比。設(shè)計(jì)師可以動(dòng)態(tài)地改變這一特性，以實(shí)現(xiàn)各種程度的印刷表現(xiàn)力，從柔和的對比到更明顯的變化。 </p></li> </ul> <p>除了註冊的軸之外，建造新軸的選項(xiàng)還允許字體設(shè)計(jì)者實(shí)現(xiàn)對字體外觀和特徵的高度客製化和複雜控制。例如，MIDL 和 CONT 等自訂軸使設(shè)計(jì)人員能夠定製字體的特殊品質(zhì)，從而實(shí)現(xiàn)靈活且富有表現(xiàn)力的排版。這些自訂與可變字體註冊相結(jié)合，提供了多種方法來創(chuàng)建不同的印刷效果。例如，中間層效果（MIDL）軸可讓設(shè)計(jì)師改變字體內(nèi)獨(dú)特的中間層，添加獨(dú)特的視覺品質(zhì)，從而增強(qiáng)藝術(shù)自由度。另一方面，對比度（CONT）軸控制粗筆畫和細(xì)筆畫之間的變化，允許動(dòng)態(tài)調(diào)整範(fàn)圍從微妙到明顯的對比。透過與「粗細(xì)」和「中間層效果」等軸交互，設(shè)計(jì)人員可以創(chuàng)建具有不同粗細(xì)和獨(dú)特樣式的文本，從而實(shí)現(xiàn)對字體外觀的精確控制。同樣，結(jié)合粗細(xì)和對比度的變化可以創(chuàng)建具有不同程度的粗體和筆劃對比度的文本，從而平衡視覺衝擊和可讀性。這些範(fàn)例展示了註冊軸和自訂軸提供的無與倫比的自由度，使設(shè)計(jì)人員能夠根據(jù)自己特定的美學(xué)偏好和設(shè)計(jì)目標(biāo)調(diào)整字體。 </p> <h2> 在 CSS 中實(shí)現(xiàn)可變字體 </h2> <p>現(xiàn)在您已經(jīng)對可更改字體的可能性著迷了，讓我們研究一下如何在基於 CSS 的 Web 專案中應(yīng)用它們。 CSS 提供了正確使用這些自適應(yīng)字體功能的方法。首先使用 @font-face 定義字體，它允許您提供不同的字體檔案及其特徵。設(shè)定字體後，您可以使用不同的 CSS 屬性動(dòng)態(tài)變更字體的軸，從而最大化不同字體提供的可能性。 </p> <h3> 取得字體 </h3> <p>首先，我們必須下載專案所需的可變字體。 <br> 互聯(lián)網(wǎng)上的一些網(wǎng)站允許我們存取不同的字體檔案。一些最常用的字體網(wǎng)站如下：</p> <ul> <li>類型網(wǎng)路</li> <li>字體松鼠</li> <li> Adobe 字型 </li> <li>字體彈簧</li> <li>Google字體</li> <li>Vfonts.com</li> </ul> <p>在這個(gè)範(fàn)例中，我們將前往 Vfonts.com 下載 Kyiv Sans 可變字體。 ttf 或 woff2 檔案格式運(yùn)作正常，但我們將在本示範(fàn)中使用 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>上面的螢?zāi)唤貓D顯示了您到達(dá) Vfont 時(shí)會(huì)看到的內(nèi)容。 </p> <p>我們將專案分為以下步驟：</p> <ol> <li><p>導(dǎo)覽至 vfont：造訪提供可變字體資源的網(wǎng)站。 </p></li> <li><p>選擇 Kyiv* 類型：選擇 Kyiv* Type 字體，這會(huì)將您重定向到託管該字體的 Behance.net。 </p></li> <li><p>訪問下載連結(jié)：在 Behance 頁面上，一直向下滾動(dòng)以找到下載字體的連結(jié)。 </p></li> <li><p>從 Google 雲(yún)端硬碟下載：點(diǎn)擊下載鏈接，您將進(jìn)入 Google 雲(yún)端硬碟資料夾。從那裡下載字體檔案。 </p></li> <li><p>解壓縮檔案：下載後，解壓縮檔案以存取其內(nèi)容。 </p></li> <li> <p>查看字型選項(xiàng)：解壓縮後的資料夾包含多個(gè)選項(xiàng)可供選擇。 </p> <ul> <li>圖示</li> <li>沒有變數(shù)</li> <li>變數(shù)</li> </ul> </li> <li> <p>選擇可變字體：專注於包含可變字體的檔案。 </p> <ul> <li>襯線</li> <li>傾斜</li> <li>Sans</li> </ul> </li> <li><p>使用 Sans 字體：設(shè)定和使用 Sans 版本的字體。請注意，Sans 字體粗細(xì)檔案為 360 KB，相當(dāng)於使用八個(gè)非可變字體檔案。 </p></li> <li><p>評估權(quán)衡：考慮使用可變字體對於您的專案是否值得。如果您只需要常規(guī)、粗體和斜體樣式，則可能不需要使用可變字體。但是，如果您需要對變體進(jìn)行高級控制，可變字體可能非常有用。 </p></li> </ol> <p>注意：以上這些文件都是TTF格式。 </p> <p>現(xiàn)在我們將前往 VSCode，我們將在其中使用普通的 vite 專案。 <br> 要開始處理該項(xiàng)目，您必須安裝必要的套件。您必須按照以下步驟操作：</p> <ol> <li><p>開啟一個(gè)新終端。 </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>選擇一個(gè) Vanilla 框架。 </p></li> <li><p>選擇 JavaScript 變體。 </p></li> <li><p>執(zhí)行 npm install 將協(xié)助您協(xié)商進(jìn)入專案並安裝必要的模組。 </p></li> <li> <p>設(shè)定依賴項(xiàng)後，使用以下命令啟動(dòng)應(yīng)用程式：<br> </p> <pre class="brush:php;toolbar:false">npm run dev </pre> </li> <li><p>造訪 http://localhost:your-port-number 即可存取瀏覽器上正在執(zhí)行的程式。 </p></li> </ol> <p>一旦我們完成了我們的項(xiàng)目，我們將擁有大量的模擬程式碼，我們可以修改它們來建立我們想要的應(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è)定正文的預(yù)設(shè)字體：</strong><br> </p><pre class="brush:php;toolbar:false">npm create vite@latest </pre> </pre> <ul> <li> <strong>用途</strong>：這將整個(gè)文件的預(yù)設(shè)字體設(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ì)範(fàn)圍</strong>：此字體支援0到1000的粗細(xì)範(fàn)圍，使其成為可變字體。 </li> <li> <strong>字體顯示</strong>：交換確保使用後備字體立即顯示文本，直到載入自訂字體。 </li> </ul> <p><strong>設(shè)計(jì) <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="元素跨越視口的整個(gè)高度">元素跨越視口的整個(gè)高度。 </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="周圍的任何預(yù)設(shè)間距"> 周圍的任何預(yù)設(shè)間距。 </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>懸停時(shí)的字體粗細(xì)</strong>：當(dāng)元素懸停在上方時(shí)改為 1000。 </li> <li> <strong>懸停時(shí)的字體變化設(shè)定</strong>：將變化設(shè)定更新為： <ul> <li> 「重量」為 1000 </li> <li> 「繼續(xù)」仍為 250 </li> <li> “MIDL”更改為-1000 </li> </ul> </li> <li> <strong>效果</strong>：當(dāng)使用者將滑鼠停留在文字上時(shí)創(chuàng)建動(dòng)態(tài)、互動(dòng)的視覺效果，突顯可變字體的靈活性。 </li> </ul> <p>最後我們的結(jié)果看起來有點(diǎn)像這樣；<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> 使用可變字體建立響應(yīng)式版式 </h2> <p>透過讓設(shè)計(jì)師實(shí)現(xiàn)跨多種裝置和螢?zāi)怀叽绲耐昝肋m應(yīng)，具有各種字體的響應(yīng)式排版改變了線上設(shè)計(jì)。可變字體具有無與倫比的多功能性，它允許在單一字體檔案中不斷更改字體屬性，包括粗細(xì)、寬度和對比度。設(shè)計(jì)人員可以使用 CSS 和媒體查詢動(dòng)態(tài)更改這些字體屬性，以提高可讀性和美觀性，確保文字在從桌面顯示器到手機(jī)的任何裝置上呈現(xiàn)最佳效果。由於單一可變字體可以取代多個(gè)固定字體文件，因此減少了大量字體載入的需要並提高了網(wǎng)站效能。這種靈活性不僅改善了使用者體驗(yàn)，也簡化了設(shè)計(jì)流程。如果沒有響應(yīng)式排版——它變得更有吸引力、更有高效，並且可以使用不同的字體進(jìn)行存取——現(xiàn)代網(wǎng)頁設(shè)計(jì)就不可能存在。 </p> <h3> 媒體查詢：螢?zāi)怀叽邕m應(yīng)大師 </h3> <p>媒體查詢是響應(yīng)式網(wǎng)頁設(shè)計(jì)的基石，是螢?zāi)怀叽邕m應(yīng)的大師?；妒褂谜咴O(shè)備的功能（例如螢?zāi)粚挾取⒏叨?、解析度和方向），它們允許設(shè)計(jì)人員應(yīng)用特定的 CSS 樣式。媒體搜尋可協(xié)助設(shè)計(jì)人員確保網(wǎng)站在各種裝置（從筆記型電腦和桌上型顯示器到智慧型手機(jī)和平板電腦）上都能以最佳方式呈現(xiàn)和運(yùn)作。 </p> <p>媒體查詢的強(qiáng)大之處在於它們能夠產(chǎn)生適合各種螢?zāi)怀叽绲撵`活且流暢的佈局。媒體查詢允許設(shè)計(jì)人員更改字體大小、更改網(wǎng)格佈局，甚至根據(jù)視窗測量隱藏或顯示某些項(xiàng)目。這確保了無論使用什麼設(shè)備，材料都能保持其美觀性和可訪問性。 </p> <p>媒體查詢定義斷點(diǎn)－佈局調(diào)整以適應(yīng)不同螢?zāi)怀叽绲奶囟ㄎ恢?。針對不同的設(shè)備，這些斷點(diǎn)是使用 min-width、max-width 和其他 CSS 特性設(shè)定的。例如，媒體查詢可能會(huì)為 768 像素或更小的螢?zāi)粚挾戎付ㄊ褂眠m合行動(dòng)裝置的佈局，並為較大的顯示器指定不同的佈局。 </p> <p>將媒體搜尋納入網(wǎng)頁設(shè)計(jì)可提高可近性和使用者體驗(yàn)。在所有平臺(tái)上，媒體查詢透過保證文字可讀、導(dǎo)航直觀且材料組織良好，有助於開發(fā)包容性數(shù)位體驗(yàn)。任何希望創(chuàng)建響應(yīng)式、適應(yīng)性強(qiáng)和用戶友好的網(wǎng)站的網(wǎng)頁設(shè)計(jì)師都必須先學(xué)習(xí)在不同裝置使用時(shí)代的媒體查詢。 </p> <p>這是一個(gè)例子：<br> </p> <pre class="brush:php;toolbar:false">npm create vite@latest </pre> <p>在此範(fàn)例中，我們使用媒體查詢根據(jù)螢?zāi)怀叽缯{(diào)整字體變化設(shè)定和字體粗細(xì)。對於最大寬度為 600px 的設(shè)備，字體大小會(huì)減少為 3rem。針對 :hover 效果相應(yīng)調(diào)整粗細(xì)和其他變化，對於寬度在 601px 到 1200px 之間的設(shè)備，字體大小設(shè)定為 4rem，並調(diào)整粗細(xì)和變化。對於寬度為1201px及以上的設(shè)備，字體大小為5rem，保持原來的設(shè)定。 <br> 這些媒體查詢可確保字體適應(yīng)不同的螢?zāi)怀叽?，從而提高各種裝置上的可讀性和使用者體驗(yàn)。 </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>上圖為小螢?zāi)坏娘@示</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>上圖顯示了中螢?zāi)坏娘@示</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>上圖為大螢?zāi)伙@示</p> <h3> 視口單位：使佈局流暢 </h3> <p>視窗單元是現(xiàn)代網(wǎng)頁設(shè)計(jì)中的強(qiáng)大工具，可以創(chuàng)建流暢且響應(yīng)式的佈局，無縫適應(yīng)不同的螢?zāi)怀叽?。視口單位包括vw（視口寬度）和vh（視口高度），它們是相對於瀏覽器視窗的尺寸而言的。 1 vw 等於視口寬度的 1%，1 vh 等於視口高度的 1%。這些單元可協(xié)助設(shè)計(jì)人員確保元素根據(jù)使用者螢?zāi)坏拇笮∵M(jìn)行縮放，從而產(chǎn)生更具動(dòng)態(tài)性和適應(yīng)性的設(shè)計(jì)。例如，以視窗單位設(shè)定字體大小、填滿或邊距，可以讓文字和物件自動(dòng)調(diào)整大小，從而在多個(gè)裝置上保持一致的外觀。無論網(wǎng)站顯示在大型桌面顯示器或小型行動(dòng)螢?zāi)簧希@種適應(yīng)性都可以確保內(nèi)容保持可讀性和美觀性，從而增強(qiáng)用戶體驗(yàn)。視口單元讓設(shè)計(jì)人員能夠創(chuàng)建適應(yīng)性強(qiáng)的佈局，可以輕鬆移動(dòng)以適應(yīng)數(shù)位設(shè)備不斷變化的地形。 </p> <p>以下是如何使用 vw 根據(jù)視窗寬度調(diào)整字體大小的範(fàn)例：<br> </p> <pre class="brush:php;toolbar:false">npm create vite@latest </pre> <p>在此範(fàn)例中，在上面的程式碼中，.variable-font 的 font-size 屬性是使用視窗寬度 vw 單位設(shè)定的，使文字大小響應(yīng)於視窗的寬度。 </p> <p>我們可以將媒體搜尋和具有不同字體特徵的視口單元結(jié)合起來，創(chuàng)建真正響應(yīng)式的排版，優(yōu)雅地適合每種設(shè)備或螢?zāi)怀叽纭＿@使我們能夠提供出色的用戶體驗(yàn)，而與某人為我們網(wǎng)站選擇的存取方法無關(guān)。 </p> <h2> 具有可變字體的高級印刷效果 </h2> <p>可變字體開啟了複雜印刷效果的新領(lǐng)域，使設(shè)計(jì)人員能夠創(chuàng)建高度客製化和動(dòng)態(tài)的文字樣式。設(shè)計(jì)師現(xiàn)在可以透過不斷調(diào)整粗細(xì)、寬度和自訂軸等特性來創(chuàng)建無縫過渡和不尋常的視覺效果，而這些效果以前使用固定字體很難實(shí)現(xiàn)。可以透過調(diào)整字體動(dòng)態(tài)來變更粗細(xì)、對比度和中線，從而提供對文字外觀的複雜控制。這種適應(yīng)性在響應(yīng)式設(shè)計(jì)中非常強(qiáng)，字體可以輕鬆調(diào)整以適應(yīng)各種螢?zāi)怀叽绾头较?。此外，互?dòng)式動(dòng)畫允許文字響應(yīng)用戶操作，例如懸?；騿螕?，產(chǎn)生有趣和身臨其境的體驗(yàn)。視窗單元與不同的字體特徵相結(jié)合，確保排版保持流暢和可擴(kuò)展，從而提高各種設(shè)備上的可讀性和外觀。利用這些複雜的功能，設(shè)計(jì)師可以透過擴(kuò)展傳統(tǒng)排版的可能性來創(chuàng)建視覺上引人注目的數(shù)位材料。讓我們來探索一些擴(kuò)展線上排版界限的有趣方法：</p> <h3> 流體版式 </h3> <p>流體排版是一種設(shè)計(jì)方法，文字可以根據(jù)視口的大小動(dòng)態(tài)縮放，從而在許多裝置上提供流暢且響應(yīng)靈敏的閱讀體驗(yàn)。視窗單元、媒體搜尋和可變更的字體讓流暢的排版確保文字保持清晰和視覺平衡，與螢?zāi)怀叽鐭o關(guān)。此方法消除了對固定字體大小的需求，並允許無縫更改，從而以適合不同顯示條件的方式提高可讀性和外觀。 </p> <p>這是一個(gè)例子：<br> </p> <pre class="brush:php;toolbar:false">npm run dev </pre> <p>工作原理：</p> <p><strong>calc() 功能：</strong> 此函數(shù)透過組合相對單位 vw 和固定值 rem 來產(chǎn)生流體縮放效果。 font-size，例如，calc(2rem 2vw) 會(huì)對視窗寬度做出反應(yīng)並確?；境叽纭?</p> <p><strong>各種元素的流體排版：</strong> 許多元素（例如 h1、h2 和 p）可以使用流體排版保證文字在不同設(shè)備上適當(dāng)縮放。 calc() 函數(shù)提供一個(gè)基本尺寸，其縮放因子隨視窗寬度而變化。 </p> <p><strong>可變字體：</strong>將流體排版與可變字體結(jié)合，您可以根據(jù)視口大小實(shí)現(xiàn)文字屬性的動(dòng)態(tài)變化。 <br> 此方法可確保文字在各種裝置和螢?zāi)怀叽缟媳３置烙^和可讀性。 </p> <p>透過動(dòng)畫文本，動(dòng)態(tài)排版賦予文本生命，並產(chǎn)生有趣和動(dòng)態(tài)的視覺效果，吸引觀眾。此方法透過使用 JavaScript 和 CSS 動(dòng)畫更改文字屬性來添加運(yùn)動(dòng)和互動(dòng)。在使用可變字體的範(fàn)例中，使用 :hover 效果對字體粗細(xì)進(jìn)行動(dòng)畫處理，我們示範(fàn)了動(dòng)態(tài)排版，即從較淺的粗細(xì)無縫過渡到較粗的粗細(xì)。這不僅強(qiáng)調(diào)了內(nèi)容，還展示瞭如何透過流暢、即時(shí)的變化，改變字體可以改善使用者互動(dòng)。動(dòng)態(tài)排版使設(shè)計(jì)師能夠提高文字的視覺吸引力和可用性，增強(qiáng)其在互動(dòng)式和有趣的數(shù)位環(huán)境中的基本作用。 </p> <h3> 例：懸停時(shí)的重量動(dòng)畫 </h3> <pre class="brush:php;toolbar:false">npm create vite@latest </pre> <p>在這裡，我們使用平滑過渡將 .variable-font 元素的粗細(xì)設(shè)定為 :hover 時(shí)從常規(guī) 100 到粗體 1000 的動(dòng)畫效果，從而創(chuàng)建微妙但有影響力的效果。 </p> <p>這些只是不同字體提供的一小部分富有想像的機(jī)會(huì)。從動(dòng)態(tài)動(dòng)畫到流暢佈局，有足夠的機(jī)會(huì)創(chuàng)造獨(dú)特且有趣的字體。只要有一點(diǎn)創(chuàng)意和對 CSS 的理解，我們就可以挑戰(zhàn)網(wǎng)頁設(shè)計(jì)規(guī)範(fàn)並產(chǎn)生相當(dāng)出色的使用者體驗(yàn)。 </p> <h2> 結(jié)論 </h2> <p>可變字體－Kyiv Sans 的最佳示範(fàn)是透過將多種字體樣式分組到一個(gè)檔案中來轉(zhuǎn)換網(wǎng)路上的版式。透過減少HTTP查詢的數(shù)量，本發(fā)明簡化了流程、增加了設(shè)計(jì)靈活性並提高了效能。設(shè)計(jì)師可以充分利用 CSS 中的可變字體來製作響應(yīng)式動(dòng)態(tài)字體，完美適應(yīng)各種螢?zāi)怀叽绾褪褂谜呋?dòng)。 <br> 設(shè)計(jì)人員可以使用粗細(xì)、中間層效果和對比度等屬性以及媒體查詢和視口單元等回應(yīng)方法來創(chuàng)建視覺上吸引人且易於存取的排版體驗(yàn)。可變字體是當(dāng)代網(wǎng)頁設(shè)計(jì)的必要工具，因?yàn)樗鼈兊牧鲃?dòng)性為藝術(shù)表達(dá)提供了新的方向。 </p> <h2> 資源 </h2> <ul> <li>查看 Netlify 上託管的即時(shí)預(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)路</li> <li>字體松鼠</li> <li> Adobe 字型 </li> <li>字體彈簧</li> <li>Google字體</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>計(jì)算()</li> </ul> <p>以上是動(dòng)態(tài)排版的可變字體的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！</p> </div> </div> <div id="wjcelcm34c" class="wzconShengming_sp"> <div id="wjcelcm34c" class="bzsmdiv_sp">本網(wǎng)站聲明</div> <div>本文內(nèi)容由網(wǎng)友自願(yuàn)投稿，版權(quán)歸原作者所有。本站不承擔(dān)相應(yīng)的法律責(zé)任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容，請聯(lián)絡(luò)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="wjcelcm34c" 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="wjcelcm34c" class="phpgenera_Details_mainR4"> <div id="wjcelcm34c" class="phpmain1_4R_readrank"> <div id="wjcelcm34c" 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="wjcelcm34c" class="phpgenera_Details_mainR4_bottom"> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh-tw/faq/1796828723.html" title="Agnes Tachyon Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide |漂亮的德比志</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <span>1 個(gè)月前</span> <span>By Jack chen</span> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh-tw/faq/1796832397.html" title="Grass Wonder Build Guide |烏瑪媽媽漂亮的德比" class="phpgenera_Details_mainR4_bottom_title">Grass Wonder Build Guide |烏瑪媽媽漂亮的德比</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <span>3 週前</span> <span>By Jack chen</span> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh-tw/faq/1796833110.html" title="<??>：在森林裡99夜 - 所有徽章以及如何解鎖" class="phpgenera_Details_mainR4_bottom_title"><??>：在森林裡99夜 - 所有徽章以及如何解鎖</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <span>3 週前</span> <span>By DDD</span> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh-tw/faq/1796831605.html" title="烏瑪?shù)姆劢z漂亮的德比橫幅日程（2025年7月）" class="phpgenera_Details_mainR4_bottom_title">烏瑪?shù)姆劢z漂亮的德比橫幅日程（2025年7月）</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <span>3 週前</span> <span>By Jack chen</span> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh-tw/faq/1796828810.html" title="NYT'連接”提示7月2日，星期三：今天遊戲的線索和答案" class="phpgenera_Details_mainR4_bottom_title">NYT'連接”提示7月2日，星期三：今天遊戲的線索和答案</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <span>1 個(gè)月前</span> <span>By DDD</span> </div> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR3_more"> <a href="http://ipnx.cn/zh-tw/article.html">顯示更多</a> </div> </div> </div> --> <div id="wjcelcm34c" class="phpgenera_Details_mainR3"> <div id="wjcelcm34c" class="phpmain1_4R_readrank"> <div id="wjcelcm34c" 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="wjcelcm34c" class="phpgenera_Details_mainR3_bottom"> <div id="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh-tw/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="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh-tw/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="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh-tw/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="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh-tw/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片</p> </div> </div> <div id="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh-tw/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="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh-tw/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="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh-tw/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="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh-tw/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI脫衣器</p> </div> </div> <div id="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh-tw/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="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh-tw/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="wjcelcm34c" class="phpgenera_Details_mainR3_more"> <a href="http://ipnx.cn/zh-tw/ai">顯示更多</a> </div> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4"> <div id="wjcelcm34c" class="phpmain1_4R_readrank"> <div id="wjcelcm34c" 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="wjcelcm34c" class="phpgenera_Details_mainR4_bottom"> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh-tw/faq/1796828723.html" title="Agnes Tachyon Build Guide |漂亮的德比志" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide |漂亮的德比志</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <span>1 個(gè)月前</span> <span>By Jack chen</span> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh-tw/faq/1796832397.html" title="Grass Wonder Build Guide |烏瑪媽媽漂亮的德比" class="phpgenera_Details_mainR4_bottom_title">Grass Wonder Build Guide |烏瑪媽媽漂亮的德比</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <span>3 週前</span> <span>By Jack chen</span> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh-tw/faq/1796833110.html" title="<??>：在森林裡99夜 - 所有徽章以及如何解鎖" class="phpgenera_Details_mainR4_bottom_title"><??>：在森林裡99夜 - 所有徽章以及如何解鎖</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <span>3 週前</span> <span>By DDD</span> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh-tw/faq/1796831605.html" title="烏瑪?shù)姆劢z漂亮的德比橫幅日程（2025年7月）" class="phpgenera_Details_mainR4_bottom_title">烏瑪?shù)姆劢z漂亮的德比橫幅日程（2025年7月）</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <span>3 週前</span> <span>By Jack chen</span> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh-tw/faq/1796828810.html" title="NYT'連接”提示7月2日，星期三：今天遊戲的線索和答案" class="phpgenera_Details_mainR4_bottom_title">NYT'連接”提示7月2日，星期三：今天遊戲的線索和答案</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <span>1 個(gè)月前</span> <span>By DDD</span> </div> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR3_more"> <a href="http://ipnx.cn/zh-tw/article.html">顯示更多</a> </div> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR3"> <div id="wjcelcm34c" class="phpmain1_4R_readrank"> <div id="wjcelcm34c" 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="wjcelcm34c" class="phpgenera_Details_mainR3_bottom"> <div id="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh-tw/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="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh-tw/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="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh-tw/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="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh-tw/toolset/development-tools/93" title="SublimeText3漢化版" class="phpmain_tab2_mids_title"> <h3>SublimeText3漢化版</h3> </a> <p>中文版，非常好用</p> </div> </div> <div id="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh-tw/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="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh-tw/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="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh-tw/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="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh-tw/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="wjcelcm34c" class="phpmain_tab2_mids_top"> <a href="http://ipnx.cn/zh-tw/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="wjcelcm34c" class="phpmain_tab2_mids_info"> <a href="http://ipnx.cn/zh-tw/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="wjcelcm34c" class="phpgenera_Details_mainR3_more"> <a href="http://ipnx.cn/zh-tw/ai">顯示更多</a> </div> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4"> <div id="wjcelcm34c" class="phpmain1_4R_readrank"> <div id="wjcelcm34c" 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="wjcelcm34c" class="phpgenera_Details_mainR4_bottom"> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh-tw/faq/laravel-tutori" title="Laravel 教程" class="phpgenera_Details_mainR4_bottom_title">Laravel 教程</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1597</span> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>29</span> </div> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh-tw/faq/php-tutorial" title="PHP教程" class="phpgenera_Details_mainR4_bottom_title">PHP教程</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1488</span> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>72</span> </div> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh-tw/faq/nytminicrosswordanswe" title="NYT迷你填字遊戲答案" class="phpgenera_Details_mainR4_bottom_title">NYT迷你填字遊戲答案</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>268</span> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>587</span> </div> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms"> <a href="http://ipnx.cn/zh-tw/faq/newyorktimesdailybrief" title="NYT連接提示和答案" class="phpgenera_Details_mainR4_bottom_title">NYT連接提示和答案</a> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info"> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>130</span> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>836</span> </div> </div> </div> </div> <div id="wjcelcm34c" class="phpgenera_Details_mainR3_more"> <a href="http://ipnx.cn/zh-tw/faq/zt">顯示更多</a> </div> </div> </div> </div> </div> <div id="wjcelcm34c" class="Article_Details_main2"> <div id="wjcelcm34c" class="phpgenera_Details_mainL4"> <div id="wjcelcm34c" 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="wjcelcm34c" class="phpgenera_Details_mainL4_info"> <div id="wjcelcm34c" class="phphistorical_Version2_mids"> <a href="http://ipnx.cn/zh-tw/faq/1796831408.html" title="CSS教程，用於創(chuàng)建加載旋轉(zhuǎn)器和動(dòng)畫" 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/431/639/175181807052041.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS教程，用於創(chuàng)建加載旋轉(zhuǎn)器和動(dòng)畫" /> </a> <a href="http://ipnx.cn/zh-tw/faq/1796831408.html" title="CSS教程，用於創(chuàng)建加載旋轉(zhuǎn)器和動(dòng)畫" class="phphistorical_Version2_mids_title">CSS教程，用於創(chuàng)建加載旋轉(zhuǎn)器和動(dòng)畫</a> <span id="wjcelcm34c" class="Articlelist_txts_time">Jul 07, 2025 am 12:07 AM</span> <p class="Articlelist_txts_p">創(chuàng)建CSS加載旋轉(zhuǎn)器的方法有三種：1.使用邊框的基本旋轉(zhuǎn)器，通過HTML和CSS實(shí)現(xiàn)簡單動(dòng)畫；2.使用多個(gè)點(diǎn)的自定義旋轉(zhuǎn)器，通過不同延遲時(shí)間實(shí)現(xiàn)跳動(dòng)效果；3.在按鈕中添加旋轉(zhuǎn)器，通過JavaScript切換類來顯示加載狀態(tài)。每種方法都強(qiáng)調(diào)了設(shè)計(jì)細(xì)節(jié)如顏色、大小、可訪問性和性能優(yōu)化的重要性，以提升用戶體驗(yàn)。</p> </div> <div id="wjcelcm34c" class="phphistorical_Version2_mids"> <a href="http://ipnx.cn/zh-tw/faq/1796831743.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/175182386183257.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="解決CSS瀏覽器兼容性問題和前綴" /> </a> <a href="http://ipnx.cn/zh-tw/faq/1796831743.html" title="解決CSS瀏覽器兼容性問題和前綴" class="phphistorical_Version2_mids_title">解決CSS瀏覽器兼容性問題和前綴</a> <span id="wjcelcm34c" class="Articlelist_txts_time">Jul 07, 2025 am 01:44 AM</span> <p class="Articlelist_txts_p">處理CSS瀏覽器兼容性和前綴問題需理解瀏覽器支持差異並合理使用廠商前綴。 1.了解常見問題如Flexbox、Grid支持不一，position:sticky失效，動(dòng)畫表現(xiàn)不同；2.查閱CanIuse確認(rèn)特性支持情況；3.正確使用-webkit-、-moz-、-ms-、-o-等廠商前綴；4.推薦使用Autoprefixer自動(dòng)添加前綴；5.安裝PostCSS並配置browserslist指定目標(biāo)瀏覽器；6.構(gòu)建時(shí)自動(dòng)處理兼容性；7.老項(xiàng)目可用Modernizr檢測特性；8.不必追求所有瀏覽器一致，確</p> </div> <div id="wjcelcm34c" class="phphistorical_Version2_mids"> <a href="http://ipnx.cn/zh-tw/faq/1796834918.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/175217558128323.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="造型與CSS不同訪問的鏈接" /> </a> <a href="http://ipnx.cn/zh-tw/faq/1796834918.html" title="造型與CSS不同訪問的鏈接" class="phphistorical_Version2_mids_title">造型與CSS不同訪問的鏈接</a> <span id="wjcelcm34c" class="Articlelist_txts_time">Jul 11, 2025 am 03:26 AM</span> <p class="Articlelist_txts_p">設(shè)置訪問過鏈接的樣式能提升用戶體驗(yàn)，尤其在內(nèi)容密集型網(wǎng)站中幫助用戶更好導(dǎo)航。 1.使用CSS的:visited偽類可定義已訪問鏈接樣式，如顏色變化；2.注意瀏覽器出於隱私限制僅允許修改部分屬性；3.顏色選擇應(yīng)與整體風(fēng)格協(xié)調(diào)，避免突兀；4.移動(dòng)端可能不顯示該效果，建議結(jié)合其他視覺提示如icon輔助標(biāo)識(shí)。</p> </div> <div id="wjcelcm34c" class="phphistorical_Version2_mids"> <a href="http://ipnx.cn/zh-tw/faq/1796833145.html" title="使用CSS剪輯路徑創(chuàng)建自定義形狀" 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/175199577133591.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="使用CSS剪輯路徑創(chuàng)建自定義形狀" /> </a> <a href="http://ipnx.cn/zh-tw/faq/1796833145.html" title="使用CSS剪輯路徑創(chuàng)建自定義形狀" class="phphistorical_Version2_mids_title">使用CSS剪輯路徑創(chuàng)建自定義形狀</a> <span id="wjcelcm34c" class="Articlelist_txts_time">Jul 09, 2025 am 01:29 AM</span> <p class="Articlelist_txts_p">使用CSS的clip-path屬性可以裁剪元素為自定義形狀，如三角形、圓形缺口、多邊形等，無需依賴圖片或SVG。其優(yōu)勢包括：1.支持circle、ellipse、polygon等多種基本形狀；2.可響應(yīng)式調(diào)整，適配移動(dòng)端；3.易於動(dòng)畫化，可結(jié)合hover或JavaScript實(shí)現(xiàn)動(dòng)態(tài)效果；4.不影響佈局流，僅裁剪顯示區(qū)域。常見用法如圓形裁剪clip-path:circle(50pxatcenter)和三角形裁剪clip-path:polygon(50%0%,1000%,00%)。注意</p> </div> <div id="wjcelcm34c" class="phphistorical_Version2_mids"> <a href="http://ipnx.cn/zh-tw/faq/1796834914.html" title="顯示：內(nèi)聯(lián)，顯示：塊和顯示：內(nèi)聯(lián)塊之間有什麼區(qū)別？" 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/175217550090568.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="顯示：內(nèi)聯(lián)，顯示：塊和顯示：內(nèi)聯(lián)塊之間有什麼區(qū)別？" /> </a> <a href="http://ipnx.cn/zh-tw/faq/1796834914.html" title="顯示：內(nèi)聯(lián)，顯示：塊和顯示：內(nèi)聯(lián)塊之間有什麼區(qū)別？" class="phphistorical_Version2_mids_title">顯示：內(nèi)聯(lián)，顯示：塊和顯示：內(nèi)聯(lián)塊之間有什麼區(qū)別？</a> <span id="wjcelcm34c" class="Articlelist_txts_time">Jul 11, 2025 am 03:25 AM</span> <p class="Articlelist_txts_p">Themaindifferencesbetweendisplay:inline,block,andinline-blockinHTML/CSSarelayoutbehavior,spaceusage,andstylingcontrol.1.Inlineelementsflowwithtext,don’tstartonnewlines,ignorewidth/height,andonlyapplyhorizo????ntalpadding/margins—idealforinlinetextstyling</p> </div> <div id="wjcelcm34c" class="phphistorical_Version2_mids"> <a href="http://ipnx.cn/zh-tw/faq/1796837251.html" title="如何使用CSS創(chuàng)建響應(yīng)式圖像？" 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/175251305059116.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="如何使用CSS創(chuàng)建響應(yīng)式圖像？" /> </a> <a href="http://ipnx.cn/zh-tw/faq/1796837251.html" title="如何使用CSS創(chuàng)建響應(yīng)式圖像？" class="phphistorical_Version2_mids_title">如何使用CSS創(chuàng)建響應(yīng)式圖像？</a> <span id="wjcelcm34c" class="Articlelist_txts_time">Jul 15, 2025 am 01:10 AM</span> <p class="Articlelist_txts_p">要使用CSS創(chuàng)建響應(yīng)式圖片，主要可通過以下方法實(shí)現(xiàn)：1.使用max-width:100%和height:auto讓圖片在保持比例的同時(shí)自適應(yīng)容器寬度；2.結(jié)合HTML的srcset和sizes屬性智能加載適配不同屏幕的圖片源；3.利用object-fit和object-position控製圖片裁剪與焦點(diǎn)展示。這些方法共同確保圖片在不同設(shè)備上清晰、美觀地呈現(xiàn)。</p> </div> <div id="wjcelcm34c" class="phphistorical_Version2_mids"> <a href="http://ipnx.cn/zh-tw/faq/1796829041.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/175147853176701.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="什麼是CSS，它代表什麼？" /> </a> <a href="http://ipnx.cn/zh-tw/faq/1796829041.html" title="什麼是CSS，它代表什麼？" class="phphistorical_Version2_mids_title">什麼是CSS，它代表什麼？</a> <span id="wjcelcm34c" class="Articlelist_txts_time">Jul 03, 2025 am 01:48 AM</span> <p class="Articlelist_txts_p">CSS，orcascadingstylesheets，isthepartofwevelvermentThatControlsawebpage’svisualAppearance，包括colors，fonts，fonts，spacing，and spacing and layout</p> </div> <div id="wjcelcm34c" class="phphistorical_Version2_mids"> <a href="http://ipnx.cn/zh-tw/faq/1796829809.html" title="CSS繪畫API是什麼？" 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/175156657090761.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS繪畫API是什麼？" /> </a> <a href="http://ipnx.cn/zh-tw/faq/1796829809.html" title="CSS繪畫API是什麼？" class="phphistorical_Version2_mids_title">CSS繪畫API是什麼？</a> <span id="wjcelcm34c" class="Articlelist_txts_time">Jul 04, 2025 am 02:16 AM</span> <p class="Articlelist_txts_p">thecsspaintingapienablesdemimageGenerationinCsssingJavascript.1.developersCreateApaintWorkletClassWithaPaint（）method.2.theyregisteritviaregisterpaint（）。 3.thecustompAntFunctionSthenusitySthenusedisthenusedisthenusedIncerspropertieslikeBacknockforg-image-image.thisallows.thisallowsforderforderynamecvis</p> </div> </div> <a href="http://ipnx.cn/zh-tw/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="wjcelcm34c" class="footer"> <div id="wjcelcm34c" class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>公益線上PHP培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！</p> </div> <div id="wjcelcm34c" class="footermid"> <a href="http://ipnx.cn/zh-tw/about/us.html">關(guān)於我們</a> <a href="http://ipnx.cn/zh-tw/about/disclaimer.html">免責(zé)聲明</a> <a href="http://ipnx.cn/zh-tw/update/article_0_1.html">Sitemap</a> </div> <div id="wjcelcm34c" 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://ipnx.cn/" title="亚洲国产日韩欧美一区二区三区">亚洲国产日韩欧美一区二区三区</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="487yr" class="pl_css_ganrao" style="display: none;"><i id="487yr"><source id="487yr"><dfn id="487yr"></dfn></source></i><video id="487yr"><listing id="487yr"><dfn id="487yr"></dfn></listing></video><del id="487yr"></del><b id="487yr"><nobr id="487yr"><optgroup id="487yr"></optgroup></nobr></b><strong id="487yr"></strong><big id="487yr"><progress id="487yr"></progress></big><input id="487yr"></input><dl id="487yr"><strike id="487yr"></strike></dl><output id="487yr"><kbd id="487yr"></kbd></output><b id="487yr"></b><progress id="487yr"><delect id="487yr"><del id="487yr"></del></delect></progress><input id="487yr"><th id="487yr"><tr id="487yr"><dfn id="487yr"></dfn></tr></th></input><wbr id="487yr"><span id="487yr"><thead id="487yr"><font id="487yr"></font></thead></span></wbr><u id="487yr"><menu id="487yr"><thead id="487yr"></thead></menu></u><center id="487yr"><acronym id="487yr"><button id="487yr"></button></acronym></center><dl id="487yr"></dl><s id="487yr"><source id="487yr"></source></s><menu id="487yr"></menu><td id="487yr"><div id="487yr"><progress id="487yr"><em id="487yr"></em></progress></div></td><progress id="487yr"></progress><tr id="487yr"></tr><small id="487yr"></small><meter id="487yr"></meter><menu id="487yr"><ol id="487yr"></ol></menu><option id="487yr"></option><pre id="487yr"></pre><sub id="487yr"></sub><progress id="487yr"></progress><style id="487yr"></style><strike id="487yr"></strike><dfn id="487yr"></dfn><sub id="487yr"><thead id="487yr"><font id="487yr"></font></thead></sub><xmp id="487yr"></xmp><ins id="487yr"><abbr id="487yr"><li id="487yr"></li></abbr></ins><tbody id="487yr"><del id="487yr"><abbr id="487yr"><code id="487yr"></code></abbr></del></tbody><ol id="487yr"><legend id="487yr"><tr id="487yr"></tr></legend></ol><s id="487yr"><pre id="487yr"></pre></s><sub id="487yr"><center id="487yr"></center></sub><ins id="487yr"><abbr id="487yr"><var id="487yr"><thead id="487yr"></thead></var></abbr></ins><nobr id="487yr"><listing id="487yr"><label id="487yr"></label></listing></nobr><legend id="487yr"></legend><samp id="487yr"><option id="487yr"></option></samp><kbd id="487yr"><optgroup id="487yr"><label id="487yr"></label></optgroup></kbd><ol id="487yr"></ol><kbd id="487yr"><optgroup id="487yr"></optgroup></kbd><fieldset id="487yr"></fieldset><th id="487yr"></th><pre id="487yr"><dfn id="487yr"><thead id="487yr"><acronym id="487yr"></acronym></thead></dfn></pre><tr id="487yr"></tr></div> </html>