前端项目引入字体

前端项目引入字体

  我的一个uni-app项目，需要引入PingFangSC-Regula字体，也就是PingFang-SC-Regular字体。

1.pingfang-sc-regular字体下载

  网上去搜查，我下载的

2.pingfang-sc-regular字体转换

  网上下载的只有tff格式，为了兼容多端，需要自行进行格式转换

  推荐Convertio，自行测试过可以转换成功，这是美国的一家文件在线转换网站，除了字体外也做图片、音视频等文件不同格式间的转换，暂时不支持.woff2，广告稍少一些，同时有Chrome插件。

  转换后有如下几种字体：

3.代码引入

  我的项目是uni-app,我这里是在uni-app全局引入：

	/*每个页面公共css */
	@font-face {
	    font-family: 'PingFangSC-Regular';
	    src:url('~@/static/fonts/PingFang-SC-Regular.otf') format('otf'), 
			url('~@/static/fonts/PingFang-SC-Regular.woff') format('woff'), /* Modern Browsers */
	    url('~@/static/fonts/PingFang SC Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
	}

  页面引用PingFangSC-Regular

	.base-title {
			margin-bottom: 20rpx;
	  		height: 40rpx;
	  		color: rgba(0,0,0,.85);
	  		font-size: 28rpx;
	  		font-weight: 700;
	  		font-family: PingFangSC-Medium;
			line-height: 40rpx;
  	}