@font-face自定义一套字体可以实现font-weight切换不同粗细的字体
2024/08/03 21:32:39
缃戦〉闇瑕佽嚜瀹氫箟涓濂楀瓧浣擄紝闇瑕佹湁姝ｅ父锛岀粏锛岀矖涓嶅悓鐨勬晥鏋滐紝涓枃瀛椾綋涓鑸瘮杈冨ぇ锛屾垜姣旇緝甯哥敤鐨勬槸浣跨敤Forntmin瀵瑰瓧浣撹繘琛屽帇缂╋紝鏈杩戝湪淇敼涓涓綉椤电殑鏃跺欙紝鍙戠幇鑷畾涔夊瓧浣撴儏鍐典笅锛屼娇鐢╞lod鍙互鍔犵矖锛屽彲鏄娇鐢╨ighter鏃犳硶瀹炵幇瀛椾綋鍙樼粏锛屾壘浜嗕笅闂锛屽彂鐜版槸鍦ㄥ畾涔夊瓧浣撶殑鏃跺欙紝涓嶈兘浣跨敤瀛楃涓诧紝搴旇鏄暟鍊煎幓瀹氫箟font-weight鐨勫師鍥犮傛瘮濡備笅闈互灏忕背鐨勫瓧浣撲负渚嬶紝鏈夐渶瑕佷笁涓瓧浣擄紝姝ｅ父锛屽姞绮楋紝鍔犵粏鐨勶紝搴旇浣跨敤涓嬮潰鐨勬柟寮忓畾涔涓変釜font-family鐨勫悕绉拌涓鑷达紝鎵嶆槸涓濂楃殑锛屾渶涓昏鐨勶紝font-weight杩欓噷涓嶈兘浣跨敤light锛宯ormal锛宐lod浠ｆ浛锛屼娇鐢ㄥ瓧绗︿覆鐨勫舰寮忎細鍙戠幇锛宐lod鏈夋晥锛岃宭ight浼氭棤鏁堬紝濡傛灉鐢ㄦ暟鍊硷紝灏卞彲浠ユ甯告樉绀轰笁绉嶇矖缁嗙殑瀛椾綋锛屽悗鏈熶娇鐢ㄤ笉鍚岀殑瀛椾綋锛屽彧闇瑕佸畾涔夊ソfont-weight
- 鈥婡font-face { font-family: "MiSans"; src: url('../fonts/min/MiSans-Light.woff') format('woff'), url('../fonts/min/MiSans-Light.ttf') format('truetype'); font-weight: 300; font-style: normal;}@font-face { font-family: "MiSans"; src:url('../fonts/min/MiSans-Normal.woff') format('woff'), url('../fonts/min/MiSans-Normal.ttf') format('truetype'); font-weight: 400; font-style: normal;}@font-face { font-family: "MiSans"; src: url('../fonts/min/MiSans-Medium.woff') format('woff'), url('../fonts/min/MiSans-Medium.ttf') format('truetype'); font-weight: 700; /*涓嶈鐢 blod*/ font-style: normal;}鈥
- 鈥 .light-text { font-family: 'MiSans'; font-weight: 300; } .normal-text { font-family: 'MiSans'; font-weight: 400; } .bold-text { font-family: 'MiSans'; font-weight: 700; }鈥