uniapp如何设置全局统一字体

前言

当前我们的App开发和Web开发面向不同的平台和设备，很多时候需要对同一份代码做不同的样式适配。其中统一字体对页面的风格影响较大，因此需要全局统一设置字体。接下来我将介绍uniapp如何实现全局统一字体的设置。

第一步：在uni.scss中设置$font-family-base变量

uni-app使用sass预处理器处理样式文件，uni.scss 是使用最多的全局样式文件，全局字体设置也应该在这里进行。在uni.scss中设定一个$font-family-base变量，这样就可以在应用程序的其他位置引用它来设置字体。

        // uni.scss

        $font-family-base: "Helvetica Neue", Helvetica, Arial, sans-serif;

        body {
            font-family: $font-family-base;
        }
    

第二步：在App.vue引入uni.scss

App.vue是uni-app框架中的主页面，它同时也是所有页面共用的布局模板。因此，我们只需要在App.vue中引入uni.scss，就可以达到全局设置字体的目的。

        // App.vue

        

        
    

第三步：在其他页面引用$font-family-base

uni-app框架中除了App.vue之外最普遍的页面类型就是页面组件。如果想在页面组件中应用我们刚刚定义的全局字体，需要在样式中引用定义在uni.scss中的$font-family-base变量。

        // CustomPage

        

        
    

总结

通过以上三个步骤，我们成功地实现了uni-app的全局统一字体设定。首先，我们在uni.scss中设定$font-family-base变量，然后将它引入到App.vue中，最后在其他的页面组件中引用这个变量即可。这种设定方法既方便又简洁，无需在多个文件中复制粘贴相同的代码。