【UniApp】uniapp 中使用不同字体

CrazyPanda发表于：2023-12-21 22:46:39浏览：292次TAG：

官方文档 uniapp 字体

展示效果 : uniapp 多种字体的显示
H5网页
Android
IOS
uni.loadFontFace({
  family: 'Bitstream Vera Serif Bold',
  source: 'url("https://sungd.github.io/Pacifico.ttf")',
  success() {
      console.log('success')
  }
})
（官方）注意:
引入中文字体，体积过大时会发生错误，建议抽离出部分中文，减少体积，或者用图片替代
微信小程序端只支持网络字体，字体链接必须是https。App支持网络或本地的字体（本地字体需使用平台绝对路径）。
微信小程序端字体链接必须是同源下的，或开启了cors支持，微信小程序的域名是servicewechat.com
canvas等原生组件不支持使用接口添加的字体
工具里提示 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";