uni-app如何导入字体

第一步：
把.css文件和字体文件一起放进static的font文件夹里，如果没有自行创建。
内容大致如下：

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1576844226174'); /* IE9 */
  src: url('iconfont.eot?t=1576844226174#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff?t=1576844226174') format('woff'),
  url('iconfont.ttf?t=1576844226174') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1576844226174#iconfont') format('svg'); /* iOS 4.1- */
}

第二步：
如果是全局字体，在app.vue中引入.css文件

@import url("./static/font/iconfont.css");

第三步：在每个字体路径前面添加以 ~@ 开头的目录路径，否则无法引入。

@font-face {font-family: "iconfont";
  src: url('~@/static/font/iconfont.eot?t=1576844226174'); /* IE9 */
  src: url('~@/static/font/iconfont.eot?t=1576844226174#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('~@/static/font/iconfont.woff?t=1576844226174') format('woff'),
  url('~@/static/font/iconfont.ttf?t=1576844226174') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('~@/static/font/iconfont.svg?t=1576844226174#iconfont') format('svg'); /* iOS 4.1- */
}

发表评论