vue中使用@font-face(字体兼容IE、微信内置)

字体转换

字体转换
https://www.fontke.com/tool/convfont/

通过上面的网站将获取到eot,svg,ttf,woff文件格式的字体

方式一

步骤一

在src/assets 中新建fonts 文件夹，将字体放入其中。

步骤二

在src/assets/css 中新建font.less 文件

@font-face{
  font-family: 'PingFangSC-Regular';
  src: url('../fonts/pingfangregular.eot'); 
  src: url('../fonts/pingfangregular.eot?#iefix') format('embedded-opentype'),
      url('../fonts/pingfangregular.woff') format('woff'), 
      url('../fonts/pingfangregular.ttf')  format('truetype'), 
      url('../fonts/pingfangregular.svg#PingFangSC-Regular') format('svg'); 
}
body {
  font-family: 'PingFangSC-Regular';
}

步骤三

在main.js 中引入

import './assets/css/font.less'

方式二

步骤一

在static 中新建fonts 文件夹，将字体放入其中。

步骤二

在src/assets/css 中新建font.css 文件

@font-face{
  font-family: 'PingFangSC-Regular';
  src: url('/static/fonts/pingfangregular.eot'); 
  src: url('/static/fonts/pingfangregular.eot?#iefix') format('embedded-opentype'),
      url('/static/fonts/pingfangregular.woff') format('woff'), 
      url('/static/fonts/pingfangregular.ttf')  format('truetype'), 
      url('/static/fonts/pingfangregular.svg#PingFangSC-Regular') format('svg'); 
}
body {
  font-family: 'PingFangSC-Regular';
}

步骤三

在main.js 中引入

import './assets/css/font.css'

问题

微信内置浏览器应该是不支持微软雅黑字体，所以可以使用PingFangSC-Regular字体代替，长得差不多。

参考

font-face

原文链接：https://www.jianshu.com/p/9ea9a4ad5ba7