前端項目，引入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