uniapp 会先加载默认字体再加载第三方字体,导致字体闪烁
时间: 2023-08-05 21:36:19 浏览: 1078
是的,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 可以通过在 `App.vue` 中设置全局样式来实现加载三方字体,并且不加载默认字体。具体步骤如下:
1. 在 `static` 文件夹下创建一个名为 `fonts` 的文件夹,将你需要加载的字体文件放到该文件夹中。
2. 在 `App.vue` 中添加以下代码:
```html
<style lang="scss">
// 导入字体文件
@font-face {
font-family: "YourFontName";
src: url("../static/fonts/YourFontName.ttf");
}
// 设置全局字体样式
* {
font-family: "YourFontName", sans-serif !important;
}
</style>
```
其中,`YourFontName` 是你字体文件的名称,需要替换成实际的名称。
这样设置后,所有页面都会加载你指定的字体文件,并且不会加载默认字体。
uniapp 字体闪烁
字体闪烁可能是由于以下原因引起的:
1.字体文件加载缓慢:如果字体文件加载缓慢,可能会导致字体出现闪烁的情况。
2.字体渲染问题:字体渲染是指将字体绘制在屏幕上的过程。如果字体渲染出现问题,可能会导致字体出现闪烁的情况。
3.硬件问题:如果您的设备硬件配置较低,可能会导致字体出现闪烁的情况。
解决方案:
1.尽可能减少页面中使用的字体数量,可以减少字体加载的时间。
2.使用合适的字体渲染方式,如字体抗锯齿。
3.升级设备硬件配置或更换设备。
阅读全文