-
官方文档 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";