font.js 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. // 建议循环调用方法,而不是这个方法内循环下载
  2. // 下载字体文件,注意要把字体域名加到后台downloadFile白名单中
  3. function downloadFont(fontUrl, filePath, fontFamily) {
  4. uni.downloadFile({
  5. url: fontUrl,
  6. success: res => {
  7. uni.getFileSystemManager().saveFile({ // 下载成功后保存到本地
  8. tempFilePath: res.tempFilePath,
  9. filePath,
  10. success: res => {
  11. // 加载字体
  12. loadFontFace(fontFamily, res.savedFilePath)
  13. }
  14. })
  15. }
  16. })
  17. }
  18. // 加载文件字体转 base64,load
  19. function loadFontFace(fontFamily, filePath) {
  20. // 读文件
  21. uni.getFileSystemManager().readFile({
  22. filePath, // 本地文件地址
  23. encoding: 'base64',
  24. success: res => {
  25. uni.loadFontFace({
  26. global: true, // 是否全局生效
  27. scopes: ['webview', 'native'], //native可能有点问题,超哥生个海报试一下
  28. family: fontFamily, // 字体名称
  29. source: `url("data:font/ttf;charset=utf-8;base64,${res.data}")`,
  30. success(res) {
  31. console.log(fontFamily + '加载成功:' + res.status)
  32. },
  33. fail: function(res) {
  34. console.log(fontFamily + '加载失败' + res)
  35. },
  36. })
  37. }
  38. })
  39. }
  40. // fontUrl: 字体地址
  41. // filename: 存储文件路径
  42. // fontFamily: css 中字体的 family
  43. export const loadCloudFontFace = function(fontUrl, filename, fontFamily) {
  44. const filePath = `${wx.env.USER_DATA_PATH}/${filename}`
  45. uni.getFileSystemManager().access({
  46. path: filePath,
  47. success: () => {
  48. loadFontFace(fontFamily, filePath)
  49. console.log('从本地加载了字体');
  50. },
  51. fail: () => {
  52. downloadFont(fontUrl, filePath, fontFamily)
  53. console.log('从外部加载了字体', fontUrl);
  54. }
  55. })
  56. }
  57. export default loadCloudFontFace