突破局限，CSS字体的魅力——变体可变字体

浣跨敤SCSS绠€鍖栦唬鐮併€備笅闈唬鐮佺殑鏍稿績鏄负姣忎釜li-settings鍔ㄧ敾娣诲姞鐩稿悓鐨勫姩鐢籪ont-variation锛屼緷娆¤缃瓑宸殑animation-delay锛歭i{animation:change0.8sinfinitelinearalternate;}@for$i浠?鍒?{li:nth-child(#{$i}){animation-delay:#{($i-1)*-0.125}s;}}@keyframeschange{0%{font-variation-settings:'wdth'60,'wght'100;涓嶉€忔槑搴︼細.5锛泒100%{font-variation-settings:'wdth'400,'wght'900;涓嶉€忔槑搴︼細1锛泒}鏁堟灉濡備笅锛歄K锛屾帴涓嬫潵锛屼娇鐢–SS3D绠€鍗曟瀯閫犱竴涓?D鍦烘櫙銆傚畬鏁寸殑CSS浠ｇ爜濡備笅锛欯font-face{font-family:'Anybod浣?;src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/ETCAnybodyPB.woff2')鏍煎紡('woff2-variations');瀛椾綋鏄剧ず锛氬潡锛涘瓧浣撴牱寮忥細鏅€氭枩浣擄紱瀛椾綋绮楃粏锛?00900锛沠ont-stretch:10%400%;}.g-container{position:relative;淇濊瘉閲戯細鑷姩锛涙樉绀猴細寮规€э紱瀛椾綋澶у皬锛?8px锛涘瓧浣撶郴鍒楋細鈥滀换浣曚汉鈥濓紱棰滆壊锛?fff锛涘彉鎹㈡牱寮忥細淇濈暀3d锛沺erspective:200px;}ul{background:radial-gradient(farthest-sideat110px0px,rgba(255,255,255,0.2)0%,#171717100%);濉厖锛?px锛涘彉鎹㈡牱寮忥細淇濈暀3d锛涘彉鎹細translateZ(-60px)rotateX(30deg)translateY(-30px);鍔ㄧ敾锛氱Щ鍔?s鏃犻檺浜ゆ浛锛?::涔嬪墠{鍐呭锛氣€溾€濓紱浣嶇疆锛氱粷瀵癸紱宸︼細0锛涘簳閮細0锛涘彸锛?锛涢珮搴︼細45px锛涜儗鏅細#141313锛涘彉鎹細鏃嬭浆X锛?230搴︼級锛涘彉鎹㈠師鐐癸細50%100%锛泒}li{瀹藉害锛?10px锛涘姩鐢伙細鏀瑰彉0.8s鏃犻檺绾挎€т氦鏇匡紱}@for$i浠?鍒?{li:nth-child(#{$i}){animation-delay:#{($i-1)*-0.125}s;}}@keyframeschange{0%{font-variation-settings:'wdth'60,'wght'100;涓嶉€忔槑搴︼細.5锛泒100%{font-variation-settings:'wdth'400,'wght'900;涓嶉€忔槑搴︼細1锛泒}@keyframes绉诲姩{100%{鍙樻崲锛歵ranslateZ(-60px)rotateX(30deg)translateY(0px);}}鏁堟灉濡備笅锛屾垜浠熀鏈繕鍘熶簡棰樺浘鐨勬晥鏋滐細瀹屾暣浠ｇ爜鍜孌EMO鏁堟灉鍙互鎴宠繖閲岋細CodePenDemo鈥斺€旂函CSS鍙彉瀛椾綋Wavefont-variation鐨勫彲鍙樿酱鈥斺€旀敞鍐岃酱鍜岃嚜瀹氫箟杞磋繑鍥濾ariableFont鏈韩鍙橀噺杞寸殑姒傚康涓婇潰璇翠簡锛屽垎涓烘敞鍐岃酱鍜岃嚜瀹氫箟杞村畾涔夎酱锛岃嫳鏂囨槸锛歳egisteredaxis-registeredaxescustomaxis-customaxes鍙橀噺鏂版牸寮忕殑鏍稿績fonts鏄彉杞寸殑姒傚康锛屾弿杩颁簡瀛椾綋璁捐涓煇涓壒鎬х殑鍏佽鍙樺寲鑼冨洿銆備緥濡傦紝鈥滅矖杞粹€濇弿杩颁簡瀛椾綋鐨勭矖缁嗭紱鈥滃搴﹁酱鈥濇弿杩颁簡瀛椾綋鐨勫搴︼紱'italicaxis'鎻忚堪鏄惁浣跨敤鏂滀綋锛屽彲浠ョ浉搴斿垏鎹紱etc.璇锋敞鎰忥紝涓€涓酱鏃㈠彲浠ユ槸鑼冨洿閫夋嫨锛屼篃鍙互鏄紑鍏抽€夋嫨銆傛潈閲嶅彲鑳藉湪1-999涔嬮棿锛屾枩浣撳彲鑳藉彧鏄?鎴?锛堝叧闂垨鎵撳紑锛夈€傛濡傝鑼冧腑鎵€瀹氫箟鐨勶紝鏈変袱绉嶇被鍨嬬殑鍙樺舰杞达紝娉ㄥ唽杞村拰鑷畾涔夎酱锛氭敞鍐岃酱鏄渶甯歌鐨勶紝骞朵笖瓒冲甯歌锛屼互鑷充簬瑙勮寖鐨勪綔鑰呰涓烘湁蹇呰杩涜鏍囧噯鍖栥€傚綋鍓嶆敞鍐岀殑浜斾釜杞存槸閲嶉噺銆佸搴︺€佸€炬枩搴︺€佹枩浣撳拰鍏夊灏哄銆傚叾瀹炰笂闈㈠凡缁忓垪鍑轰簡5涓厤鍑嗚酱锛岀畝鍗曚粙缁嶄笅瀹冧滑鐨勪娇鐢ㄣ€傚啀鍒椾竴涓嬶細瀛楅噸杞粹€渨ght鈥濓細瀵瑰簲font-weight锛屾帶鍒跺瓧浣撶殑绮楃粏鍜屽搴﹁酱鈥渨dth鈥濓細瀵瑰簲font-stretch锛屾帶鍒跺瓧浣撶殑鎷変几鏂滃害杞粹€渟lnt鈥濓紙slant锛?瀵瑰簲font-style:oblique+angle锛屾帶鍒跺瓧浣撴枩浣撹酱鐨勫€炬枩搴?ital":瀵瑰簲瀛椾綋鐨刦ont-style:italic,鎺у埗瀛椾綋鐨勫€炬枩搴︼紙娉ㄦ剰鍜宖ont-涓嶅悓style:oblique)opticalsizeaxis"opsz":瀵瑰簲浜庡瓧浣撶殑瀛椾綋鍏夊澶у皬锛屽畠鎺у埗瀛椾綋鐨勫厜瀛﹀ぇ灏忛渶瑕佺粰瀹冧竴涓洓涓瓧姣嶇殑鏍囩鎵嶈兘鏄剧ず鍦ㄥ瓧浣撴枃浠舵牸寮忔湰韬腑銆傝鎴戜滑鐪嬩竴涓嚜瀹氫箟杞寸殑绀轰緥锛?p>Grade

p{font-family:"AmstelvarVF",serif;瀛椾綋澶у皬锛?4px锛沠ont-variation-settings:'GRAD'88;}abovefont-family:"AmstelvarVF"鏄彲鍙樺瓧浣擄紝'GRAD'鏄嚜瀹氫箟杞翠箣涓€锛屾剰鎬濇槸绛夌骇杞淬€傛笎鍙樿酱鈥淕RAD鈥濓細鏈鈥滄笎鍙樷€濇寚鐨勬槸瀛椾綋璁捐鐨勭浉瀵归噸閲忔垨瀵嗗害锛屼絾涓庝紶缁熺殑鈥滈噸閲忊€濅笉鍚岀殑鏄枃鏈崰鎹殑鐗╃悊绌洪棿涓嶄細鏀瑰彉锛屽洜姝ゆ敼鍙樻枃鏈瓑绾т笉浼氭敼鍙樻枃鏈垨鍏跺懆鍥村厓绱犵殑鏁翠綋甯冨眬銆傝繖浣垮緱绛夌骇鎴愪负涓€涓湁鐢ㄧ殑鍙樺寲杞达紝鍥犱负瀹冨彲浠ユ敼鍙樻垨鍔ㄧ敾鑰屼笉浼氬鑷存枃鏈湰韬殑閲嶆帓銆侻DN涓婃湁涓€涓叧浜庢洿鏀光€淕RAD鈥濆€间互瀵瑰簲瀛椾綋鏇存敼鐨凞EMO銆傛晥鏋滃涓嬶細鍊煎緱娉ㄦ剰鐨勬槸锛岃嚜瀹氫箟杞村彲浠ユ槸瀛椾綋璁捐甯堟兂璞′腑鐨勪换浣曡璁″彉鏇磋酱銆傚彲鑳芥湁涓€浜涗細閫愭笎鍙樺緱鐩稿綋鏅亶锛岀敋鑷抽殢鐫€瑙勮寖鐨勫彂灞曡€屾紨鍙樻垚娉ㄥ唽杞淬€傚湪鍝噷鍙互鎵惧埌鍙彉瀛椾綋锛熷ソ鐨勶紝濡傛灉鐜板湪鎴戞兂鍦ㄤ笟鍔′腑浣跨敤鍙彉瀛椾綋鏉ュ疄鐜颁竴涓晥鏋滄垨鍔ㄧ敾锛屾垜鍦ㄥ摢閲屽彲浠ユ壘鍒板彲鍙樺瓧浣撶殑璧勬簮锛熻繖鏄竴涓潪甯镐笉閿欑殑缃戠珯鈥斺€擵ariableFonts銆備笂闈㈡敹闆嗕簡寰堝VariableFonts锛屽湪registrationaxis涓婂垪鍑轰簡瀹冧滑鏀寔鐨勫瓧浣撳睘鎬ц寖鍥淬€傛瘮濡傚瓧浣撶矖缁嗘敮鎸佷粠100鍒?00銆傛垜浠彲浠ヨ嚜鐢辫皟璇曞拰棰勮CaniUse(2022-02-20)鎴戠幇鍦ㄥ彲浠ュ紑濮嬩娇鐢ㄥ彲鍙樺瓧浣撲簡鍚楋紵鎴鍒颁粖澶╋紝CaniUse:Compatibility鐨勬埅鍥惧凡缁忓緢濂戒簡锛屽鏋滀笉鑰冭檻IE绯诲垪锛屽彲浠ュ幓瀹為檯鐢熶骇鐜銆傛渶鍚庯紝鍏充簬CSSFontVariation鐨勭浉鍏充粙缁嶉潪甯稿皯銆傚鏋滀綘瀵瑰畠寰堟劅鍏磋叮锛岃繖閲屾湁涓€绡囬潪甯稿€煎緱涓€璇荤殑鏂囩珷锛氱綉缁滃彲鍙樺瓧浣撲粙缁嶆湰鏂囧埌姝ょ粨鏉燂紝甯屾湜瀵逛綘鏈夋墍甯姪锛氾級濡傛灉浣犳兂鑾峰緱鏈€鏈夎叮鐨凜SS璧勬枡锛屼笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇杞朵簨馃槃鏇村绮惧僵CSS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屾寔缁洿鏂般€傛杩庣偣涓槦璁㈤槄鏀惰棌銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>