当前位置：首页 > uni-app

uniapp 字体设置

2026-01-14 19:34:11uni-app

uniapp 字体设置方法

uniapp 中设置字体可以通过以下几种方式实现，适用于不同场景和需求。

全局字体设置

在 App.vue 文件中通过样式定义全局字体，确保所有页面继承该字体设置。

<style>
    /* 设置全局默认字体 */
    page {
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    }
</style>

局部字体设置

在单个页面或组件的 <style> 标签中定义局部字体样式。

<style scoped>
    .custom-text {
        font-family: "Helvetica Neue", Arial, sans-serif;
        font-size: 16px;
        font-weight: bold;
    }
</style>

动态加载网络字体

通过 CSS 的 @font-face 规则加载自定义字体文件（如 .ttf 或 .woff 格式）。

<style>
    @font-face {
        font-family: 'CustomFont';
        src: url('https://example.com/fonts/custom-font.ttf') format('truetype');
    }
    .custom-font {
        font-family: 'CustomFont';
    }
</style>

平台差异处理

针对不同平台（如小程序、H5）可能需要特殊处理字体设置。例如，小程序中需将字体文件放在本地目录并引用。

/* 小程序端 */
@font-face {
    font-family: 'MiniProgramFont';
    src: url('/static/fonts/mini-font.ttf');
}

使用条件编译

通过条件编译实现不同平台的字体设置差异。

uniapp 字体设置

/* #ifdef MP-WEIXIN */
page {
    font-family: "WeChatFont", sans-serif;
}
/* #endif */

/* #ifdef H5 */
body {
    font-family: "WebFont", Arial;
}
/* #endif */