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

字体转换

字体转换
通过上面的网站将获取到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

网站导航

网站导航