admin管理员组文章数量:1594972
-
官方文档 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
- 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/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/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/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
版权声明：本文标题：uniapp 中使用不同字体 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1728203868a1149729.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论