• 官方文档  uniapp  字体

展示效果 : uniapp 多种字体的显示

• H5网页

• Android

• IOS

uni.loadFontFace({
  family: 'Bitstream Vera Serif Bold',
  source: 'url("https://sungd.github.io/Pacifico.ttf")',
  success() {
      console.log('success')
  }
})

（官方）注意:

1. 引入中文字体，体积过大时会发生错误，建议抽离出部分中文，减少体积，或者用图片替代

2. 微信小程序端只支持网络字体，字体链接必须是https。App支持网络或本地的字体（本地字体需使用平台绝对路径）。

3. 微信小程序端字体链接必须是同源下的，或开启了cors支持，微信小程序的域名是servicewechat.com

4. canvas等原生组件不支持使用接口添加的字体

5. 工具里提示 Faild to load font可以忽略

如果想在  App.vue 中初始化 字体 需要延迟 执行；暂时不知道为什么 猜测有可能 App.vue 执行到的时候 页面资源还没执行完毕 所以无法调用

<script>
  export default {
    onLaunch: function() {
      console.log('App Launch')
 
      setTimeout(() => {
        //本地 只支持 APP
        // uni.loadFontFace({
        //   family: 'font-test',
        //   // 本地字体路径需转换为平台绝对路径
        //   source: `url(${plus.io.convertLocalFileSystemURL('_www/static/Pacifico.ttf')})`,
        //   success() {
        //     console.log('success')
        //   },
        //   fail(e) {
        //     console.log('fail')
        //   }
        // })
        
        //远程 兼容 App H5
        const url = 'https://haciend-aassets-5gdqxjj2b8cb72d6-1302720239.tcloudbaseapp.com/Rabbit font.ttf'
        uni.loadFontFace({
          family: 'font-test',
          source: `url("${url}")`
        })
      }, 300)
 
 
 
    },
    onShow: function() {
      console.log('App Show')
    },
    onHide: function() {
      console.log('App Hide')
    }
  }
</script>
 
<style>
  /*每个页面公共css */
</style>

• 顺便提一句 Android 手机设置    font-weight: 500; 无效的问题

我们来看段代码

    <view class="text-cn" style="font-weight: 300;">
      哦 我是 谁 我在那？font-weight: 300;
    </view>
    <view class="text-cn" style="font-weight: 400;">
      哦 我是 谁 我在那？font-weight: 400;
    </view>
    <view class="text-cn" style="font-weight: 500;">
      哦 我是 谁 我在那？font-weight: 500;
    </view>
    <view class="text-cn" style="font-weight: 600;">
      哦 我是 谁 我在那？font-weight: 600;
    </view>
    <view class="text-cn" style="font-weight: 700;">
      哦 我是 谁 我在那？font-weight: 700;
    </view>
    <view class="text-cn" style="font-weight: 800;">
      哦 我是 谁 我在那？font-weight: 800;
    </view>
    <view class="text-cn" style="font-weight: 900;">
      哦 我是 谁 我在那？font-weight: 900;
    </view>
    <view class="text-cn" style="font-weight: normal;">
      哦 我是 谁 我在那？font-weight: normal;
    </view>
    <view class="text-cn" style="font-weight: bold;">
      哦 我是 谁 我在那？font-weight: bold;
    </view>

所以呢 实际上 在uniapp  中只支持 两种加粗；在实际生产环境中 建议使用两档：

• style="font-weight: normal;"

• style="font-weight: bold;"

page.vue

<template>
  <view class="content">
    <view class="text-area">
      <text class="title">{{title}}</text>
    </view>
    <view class="text-en">
      who am i ?
    </view>
    <view>loadFontFaceFromWeb</view>
    <button @click="loadFontFaceFromWeb">从网络加载字体</button>
    <!-- #ifdef APP-PLUS -->
    <!-- 从本地加载字体 -->
    <view>loadFontFaceFromLocal</view>
    <button @click="loadFontFaceFromLocal">从本地加载字体</button>
    <view>loadFontFaceFromCache</view>
    <button @click="loadFontFaceFromCache">从网络加载字体并缓存</button>
    <!-- #endif -->
    <view class="text-cn">
      哦 我是 谁 我在那？
    </view>
 
  </view>
</template>
 
<script>
  //const url = 'https://sungd.github.io/Pacifico.ttf'
  const url = 'https://haciend-aassets-5gdqxjj2b8cb72d6-1302720239.tcloudbaseapp.com/Rabbit font.ttf'
  export default {
    data() {
      return {
        title: 'Hello'
      }
    },
    onLoad() {
 
    },
    methods: {
      loadFontFaceFromWeb() {
        uni.loadFontFace({
          family: 'font-test',
          source: `url("${url}")`
        })
      },
      // #ifdef APP-PLUS
      loadFontFaceFromLocal() {
        uni.loadFontFace({
          family: 'font-test',
          // 本地字体路径需转换为平台绝对路径
          source: `url(${plus.io.convertLocalFileSystemURL('_www/static/Pacifico.ttf')})`,
          success() {
            console.log('success')
          },
          fail(e) {
            console.log('fail')
          }
        })
      },
      async loadFontFaceFromCache() {
        let tempFilePath
        const savedFilePath = uni.getStorageSync('Pacifico')
        const [error, res] = await uni.getSavedFileList()
        if (!error) {
          const fileList = res.fileList
          const file = fileList.find(file => file.filePath === savedFilePath)
          if (file) {
            tempFilePath = file.filePath
          }
        }
        if (!tempFilePath) {
          const [error, res] = await uni.downloadFile({
            url,
          })
          if (!error) {
            tempFilePath = res.tempFilePath
            uni.saveFile({
              tempFilePath,
              success(res) {
                uni.setStorage({
                  key: 'Pacifico',
                  data: res.savedFilePath
                })
              }
            })
          } else {
            console.log('下载失败')
            return
          }
        } else {
          console.log('使用缓存资源，跳过下载步骤')
        }
        uni.loadFontFace({
          family: 'font-test',
          source: `url("${plus.io.convertLocalFileSystemURL(tempFilePath)}")`
        })
      }
      // #endif
    }
  }
</script>
 
<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: font-test;
  }
 
  .text-area {
    display: flex;
    justify-content: center;
  }
 
  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
 
  .text-cn {
    color: #ff0004;
    font-family: 'Courier New', Courier, monospace;
  }
 
  .text-en {
    color: #1755ff;
    /* font-family: ""; */
    font-family: Arial, Helvetica, sans-serif;
  }
</style>

示例工程下载

2021年5月补充：

前几天做了一个PC版的 网页；发现其实我们大多时候 不用引入外部字体！  应为各个操作系统其实 是有类似的字体的；

比方下面这句代码：可以在 window 平台 和 Mac  得到 基本一样的显示效果！， 就是应为 在不同平台找到了 对应的字体

font-family: Helvetica, arial, "Microsoft YaHei", freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";

生僻字 字体剔除：

 生僻字字体剔除https://blog.csdn.net/nicepainkiller/article/details/127887100?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168802707216800182755863%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=168802707216800182755863&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-127887100-null-null.268^v1^koosearch&utm_term=%E5%AD%97%E4%BD%93&spm=1018.2226.3001.4450