1. 程式人生 > >前端項目,引入PingFang SC字體

前端項目,引入PingFang SC字體

.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字體