前端項目,引入PingFang SC字體
阿新 • • 發佈:2018-08-06
.cn 代碼 regular color targe fan 密碼 鏈接 方法
在仿蘋果官網"垃圾桶"時, 設計出的UI使用PingFang SC 字體,在網上查了很久,特記錄。
如果你有更好的方法,歡迎評論留言~
實現原理,使用@font-face將字體下載在用戶電腦中,然後font-family使用字體。
關於font-face鏈接
css:
@font-face { font-family: ‘myFont‘; src: url(‘/assets/font/PingFangSC-Light.ttf‘); //你的資源目錄 font-weight: normal; font-style: normal; } html,body { font-family: myFont, sans-serif; }
蘋方提供了六個字重,font-family 定義如下:
蘋方-簡 常規體
font-family: PingFangSC-Regular, sans-serif;
蘋方-簡 極細體
font-family: PingFangSC-Ultralight, sans-serif;
蘋方-簡 細體
font-family: PingFangSC-Light, sans-serif;
蘋方-簡 纖細體
font-family: PingFangSC-Thin, sans-serif;
蘋方-簡 中黑體
font-family: PingFangSC-Medium, sans-serif;
蘋方-簡 中粗體
font-family: PingFangSC-Semibold, sans-serif;
字體下載鏈接:https://pan.baidu.com/s/1xOOIJGjopRdsexXuC6FkVQ 密碼:fq72
前端項目,引入PingFang SC字體