uniapp 小程序引入在线网络路径字体图标

前言

微信小程序不支持在 css 中引入本地文件，比如字体图标，背景图片。如果要使用的话，得将他们转化为 base64 格式使用。那么在 uniapp 中可以引入网络路径字体图标吗？答案是可以的。

栗子

举个栗子，微信小程序的 css 文件引入使用字体图标文件：

引入路径只能是 base64 格式

iconfont.css

css

@font-face {
  font-family: 'iconfont';
  // 引入路径只能是 base64 格式
  src: url('data:font/ttf;charset=utf-8;b  ..省略很长很长..  gAAAAA3trR8QAAAADe2tHx')
    format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.iconfont {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'iconfont' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-arrow:before {
  content: '\e901';
}

为了方便开发者，uniapp 允许在 css 文件中引入网络路径地址，只要下载下来的文件不超过 40kb。uniapp 会自动将其转化为 base64 格式。

所以你只需要在 css 文件里这么写：

css

@font-face {
  font-family: 'iconfont';  /* Project id 2298467 */
  src: url('https://at.alicdn.com/t/c/font_2298467_uud05gbeih.woff2?t=1665282553418') format('woff2'),
       url('https://at.alicdn.com/t/c/font_2298467_uud05gbeih.woff?t=1665282553418') format('woff'),
       url('https://at.alicdn.com/t/c/font_2298467_uud05geih.ttf?t=1665282553418') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-online-service:before { 
  content: "\e709";
}

然后再 App.vue 中的 style 标签里

<style scoped>
/* @import url('../../style/style.css'); */
/* or */
/* 引入字体文件 uniapp 推荐路径以~@开头 */
@import url('~@/style/style.css');



</style>

最后就可以在所有 vue 文件中使用 iconfont 字体图标啦

总结

就是 uniapp 可以直接使用网络路径加载字体图标，前提是其下载下来的大小不超过 40kb

uniapp 小程序引入在线网络路径字体图标 ​

前言 ​

栗子 ​

总结 ​

uniapp 小程序引入在线网络路径字体图标

前言

栗子

总结