1鍓嶈█1.1鍦烘櫙鎴戜滑鍦ㄩ〉闈㈠睍绀虹殑鏃跺€欙紝涓轰簡鏇村ソ鐨勬晥鏋滐紝涓€鑸細浣跨敤鑷畾涔夊瓧浣揁fant-face銆傛垜涔嬪墠鍦ㄥ紑鍙戣繃绋嬩腑浣跨敤浜嗕竴浜涜嚜瀹氫箟瀛椾綋锛岃繖閲屾€荤粨浜嗕竴浜涙垜姝ｅ湪瀵绘壘鐨勮В鍐虫柟妗堛€傛湰鏂囦粎鍒楀嚭鏈湴瀛椾綋鐨勪粙缁嶃€傜敱浜庣綉涓婂瓧浣撲笉澶氾紝杩欓噷灏变笉澶氫粙缁嶄簡銆傪煒傚ソ闅剧湅馃槀2Text2.1鏈湴瀛椾綋2.1.1Copyright棣栧厛浣犺娉ㄦ剰杩欎釜闂2.1.2瀛椾綋瀹氫箟涓€鑸儏鍐靛畾涔夊涓嬶細@font-face{font-family:"Regular";src:url('../font/Regular.otf');}瀹氫箟鍦ㄦ垜浠浣跨敤鐨勫瓧浣撶殑classA涓婏細.classA{font-family:"Regular";}2.1.3瀛椾綋鍘嬬缉涓€鑸腑鏂囧瓧浣撻兘鏄?-10M锛屽浜庢暣涓」鐩潵璇村お澶т簡锛岃繖閲屼粙缁嶄袱绉嶆垜瀹炶返杩囩殑鍘嬬缉鏂瑰紡銆備袱鑰呴兘闇€瑕佹偍浣跨敤杩囩殑鍗曡瘝鍒楄〃銆?font-spider瀹樼綉锛歨ttp://font-spider.org/鏀寔gulp鏋勫缓鎻掍欢銆傛垜鍦ㄤ娇鐢ㄧ殑鏃跺€欙紝涓€寮€濮嬪苟娌℃湁鍘嬬缉鎴愬姛銆備箣鍚庯紝鎴戝彂鐜版垜涓嬭浇鐨勫瓧浣撶増鏈湁鐐逛綆銆傝繖鏄垜鎵惧埌鐨勫彲渚涗笅杞界殑瀛椾綋鍒楄〃銆傜綉绔欙紝鎴戣寰椾笉閿欙細https://www.fontke.com/font/2Fontmin瀹樼綉锛歨ttp://ecomfe.github.io/fontmin/杩欎釜姣旇緝鏂逛究鍥犱负鏈夊鎴风鍙互鎿嶄綔2.1.4fontloading铏界劧鏈夊帇缂╁姛鑳斤紝浣嗘槸蹇呴』鎻愪緵鎵€鏈夌敤鍒扮殑瀛椾綋锛屾垜鎯崇殑鏄垜鐨勯」鐩噷榛樿鏈変釜濂界湅鐨勫瓧浣撱€傝繖灏遍亣鍒颁簡涓€涓棶棰樸€傜涓€娆″姞杞芥椂锛屾祻瑙堝櫒闇€瑕佷竴浜涙椂闂存潵鍔犺浇瀛椾綋鏂囦欢銆傚湪鍔犺浇瀹屾垚涔嬪墠锛岄〉闈細鏄竴鐗囩┖鐧斤紝鍗矲OIT(FlashofInvisibleText)1FOUTFOUT(FlashofUnstyledText)澶ц嚧鎰忔€濇槸鍦ㄥ瓧浣撳姞杞藉畬鎴愪箣鍓嶏紝娴忚鍣ㄤ細鏄剧ず璇ュ瓧浣撶殑椤哄簭瀛椾綋-family褰撳姞杞藉畬鎴愭椂锛屼細琚浛鎹负瀹氫箟鐨勫瓧浣擄紝璁剧疆濡備笅锛欯font-face{...font-display:swap;...}杩欎釜鏁堟灉灏辨槸椤甸潰涓婁細鐪嬪埌鐨勪竴涓瓧浣撴浛鎹㈢殑鏁堟灉馃槀2FontFaceObserver鐒跺悗鎴戝氨鎯筹紝鏈夋病鏈夊姙娉曞垽鏂瓧浣撳姞杞藉畬鎴愬憿锛熷畨瑁咃細npmifontfaceobserverpage://@font-faceincss宸插畾涔塴oad().then(()=>{document.getElementById('index').style.fontFamily='Regular'console.timeEnd("Fontloadingtime")})}锛屽彲浠ュ湪鍔犺浇鍔ㄧ敾鍚屾椂锛岃繖鏍锋晥鏋滀細鏇村ソ馃槑2.2Webfonts2.2.1浠嬬粛webfont:https://www.webfont.com/鎴戞壘鍒颁簡涓€涓柟娉曪紝浣嗘垜娌℃湁瀹為檯浣跨敤杩囷紝鎵€浠ユ垜涓嶇煡閬撳浣曟湁鐢ㄣ€傚鏋滄偍鏈夊叴瓒ｏ紝鍙互灏濊瘯涓€涓嬨€?鍚庤鎰熻阿鎮ㄧ殑鏀寔銆傚鏈変笉瓒筹紝娆㈣繋澶у鎸囧嚭锛屼簰鐩搁紦鍔便€傝寰椾笉閿欒寰楃偣涓禐璋㈣阿澶у馃槀娆㈣繋鍏虫敞鎴戯細銆怗ithub銆戙€愭帢閲戙€戙€愮畝涔︺€戞湰鏂囬噰鐢–reativeCommonsAttribution-Non-Commercial-ShareAlike4.0InternationalLicense鎺堟潈鍗忚銆傛潵婧愶細https://github.com/xrkffgg/Tools
