前端項目，引入PingFang SC字體

在仿蘋果官網"垃圾桶"時， 設計出的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