微信小程序wxss如何引用外部CSS文件以及iconfont

微信小程序wxss引用外部CSS文件以及iconfont的方法如下：

引用外部CSS文件

1. 在小程序的根目录（通常是项目名称）中创建一个新文件夹，例如：styles。
2. 在styles文件夹中创建一个新的CSS文件，例如：global.css。
3. 在global.css中编写CSS样式代码。
4. 在需要使用global.css样式的WXSS文件中使用@import引入CSS文件，例如：@import "../styles/global.css";。
5. 注意：引入的CSS文件不得包含CSS的@charset规则。也不支持相对路径“./”和“/”。

示例：

在styles文件夹中创建global.css文件，然后编写如下代码：

/* global.css */
.title {
  font-size: 24px;
  color: #333;
}

然后在需要使用该样式的WXSS文件中，使用@import引入CSS文件。

/* index.wxss */
@import "../styles/global.css";

.page {
  background-color: #f6f6f6;
}

.title {
  margin-top: 20px;
}

这样，在index页面中的.title元素就会继承global.css中定义的样式。

引用iconfont

1. 打开iconfont网站，选择需要引用的图标。
2. 点击“加入购物车”按钮，然后点击“下载代码”按钮。
3. 解压下载的代码，可以看到font文件夹中包含iconfont.ttf和iconfont.css。
4. 将font文件夹复制到小程序的根目录下。
5. 在需要引用iconfont的WXSS文件中使用@font-face引入字体文件，例如：

/* index.wxss */
@font-face {
  font-family: 'iconfont';
  src: url('/font/iconfont.ttf') format('truetype');
}

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

.icon-back:before {
  content: '\e67c';
}

遵循如上步骤后，我们还可以在HTML文件中使用在iconfont中自定义的字体。

<!-- index.wxml -->
<view class="container">
  <text class="iconfont icon-back"></text>
  <text class="title">微信小程序wxss引用外部CSS和iconfont</text>
  <text class="desc">本文的目的是演示如何在微信小程序wxss中引用外部CSS和iconfont，附上示例代码。</text>
</view>

这样，在小程序页面中就可以正确地显示我们自定义的iconfont图标了。

以上就是微信小程序wxss引用外部CSS文件以及iconfont的完整攻略。