uniapp 字体闪烁

是的，UniApp 在加载字体时会先加载默认字体，然后再加载第三方字体。这可能会导致字体闪烁的问题，因为页面在加载第三方字体之前会先使用默认字体进行显示。 为了解决这个问题，您可以尝试使用 CSS 的 font-display 属性。这个属性可以控制字体的加载方式，让页面在加载字体时先显示默认字体，等待第三方字体加载完成后再进行替换，从而避免字体闪烁的问题。 具体使用方法如下： 1. 在 CSS 中设置字体的 font-display 属性： ``` @font-face { font-family: 'YourFont'; src: url('path-to-your-font.woff2') format('woff2'), url('path-to-your-font.woff') format('woff'); font-display: swap; } ``` 2. 在 HTML 中使用自定义字体： ``` <div style="font-family: YourFont">Hello World</div> ``` 通过使用 font-display 属性，您可以让页面在加载字体时更加平滑，避免了字体闪烁的问题。

### 解决 UniApp 自定义底部按钮点击跳转页面时的闪烁问题 在处理 UniApp 中自定义底部按钮点击跳转页面时出现的闪烁现象，可以采取多种优化措施。具体方法涉及调整页面加载逻辑以及优化渲染过程。 #### 1. 使用缓存机制减少重新渲染 为了防止页面切换过程中发生重绘而导致视觉上的闪烁，可以在 `pages.json` 文件中设置页面预载入功能： ```json { "preloadRule": { "path/to/pageA": { "condition": true, "mode": "auto" }, "path/to/pageB": { "condition": true, "mode": "auto" } } } ``` 这会使得目标页面提前被加载到内存中，在实际访问时只需激活而无需再次编译和挂载[^1]。 #### 2. 预加载资源文件 对于首次打开应用或特定场景下可能出现的短暂白屏情况，可以通过预先下载图片、字体等静态资源的方式加以改善。例如，在 App.vue 的生命周期钩子函数内执行异步请求获取所需素材并存储于本地缓存中： ```javascript export default { onLoad() { uni.request({ url: '/api/assets', method: 'GET', success(res) { const assets = res.data; Object.keys(assets).forEach(key => { wx.downloadFile({ url: assets[key], success(downloadRes) { plus.io.resolveLocalFileSystemURL('_www/', function (dirEntry) { dirEntry.getFile(`./${key}`, { create: true }, fileEntry => { fileEntry.createWriter(writer => { writer.write(new Blob([downloadRes.tempFilePath])); }); }); }); } }); }); } }); } }; ``` 此操作可确保当用户触发相应事件时这些资源已经存在于设备上，从而加快展示速度[^2]。 #### 3. 利用 keep-alive 组件保持状态 针对频繁交互且数据量不大的界面，推荐采用 Vue 提供的 `<keep-alive>` 标签包裹待保留视图部分，这样即使离开当前路由也不会销毁实例对象及其内部属性值，进而达到平滑过渡的效果： ```html <template> <view class="container"> <!-- ... --> <navigator :url="'/pages/index/index'" hover-class="none"> <image src="/static/images/home.png"></image> </navigator> <keep-alive> <component v-bind:is="currentComponentName"></component> </keep-alive> <!-- ... --> </view> </template> ``` 上述代码片段展示了如何利用 `v-bind:is` 动态绑定组件名称实现灵活控制显示内容的同时维持其活动周期内的变量不变性[^3]。