uni-app
uni-app x
uniCloud
HBuilder X
uni 小程序 sdk
uni-ad广告
开发者服务
GitHub
uni-app x
uni-app
uni-app x
uniCloud
HBuilder X
uni 小程序 sdk
uni-ad广告
开发者服务
GitHub
简体中文
CSS
font-weight
uni-app x 兼容性
拍平兼容性
语法
值限制
font-weight 的属性值
默认值
适用组件
示例
App平台差异
展示全部

# font-weight

font-weight 属性用于设置字体的粗细程度。

# uni-app x 兼容性

Web Android iOS HarmonyOS HarmonyOS(Vapor)
4.0 3.9 4.11 4.61 5.0

# 拍平兼容性

Android(Vapor) iOS(Vapor) HarmonyOS(Vapor)
5.1 5.1 5.0

# 语法

font-weight: <font-weight-absolute>{1,2};

# 值限制

  • enum
  • number

# font-weight 的属性值

名称 兼容性 描述
normal
正常粗细。与 400 等值。
bold
加粗。与 700 等值。
400
正常粗细，与 normal 等值。
500
Medium
600
Semi Bold (Demi Bold)
700
加粗，与 bold 等值。
100
Thin
200
Extra Light (Ultra Light)
300
Light
800
Extra Bold (Ultra Bold)
900
Black (Heavy)

# 默认值

normal

# 适用组件

# 示例

示例为hello uni-app x alpha分支，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见

扫码体验（手机浏览器跳转到App直达页）

示例

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <view style="flex-grow: 1;">
      <text class="uni-tips">说明：左边是正常版本，右边是拍平版本</text>
      <view class="demo-box">
        <view class="common">
          <text class="common-size" style="font-weight: normal;">font-weight: normal</text>
          <text class="common-size" style="font-weight: bold;">font-weight: bold</text>
          <text class="common-size" style="font-weight: 400;">font-weight: 400</text>
          <text class="common-size" style="font-weight: 700;">font-weight: 700</text>
        </view>
        <view class="common">
          <text class="common-size" style="font-weight: normal;" flatten>font-weight: normal</text>
          <text class="common-size" style="font-weight: bold;" flatten>font-weight: bold</text>
          <text class="common-size" style="font-weight: 400;" flatten>font-weight: 400</text>
          <text class="common-size" style="font-weight: 700;" flatten>font-weight: 700</text>
        </view>
      </view>

      <view class="uni-common-mt">
        <text class="uni-title-text">setProperty 设置与 getPropertyValue 获取 font-weight 测试</text>
      </view>

      <view class="common-box">
        <!-- 普通版本 -->
        <view class="uni-common-mt">
          <text class="uni-title-text">font-weight</text>
          <text class="uni-info">设置值: {{data.fontWeight}}</text>
          <text class="uni-info">获取值: {{data.fontWeightActual}}</text>
          <view class="test-box">
            <text ref="textRef" class="common-size test-text" :style="{ fontWeight: data.fontWeight }">当前 font-weight: {{data.fontWeight}}</text>
          </view>
        </view>

        <!-- 拍平版本 -->
        <view class="uni-common-mt">
          <text class="uni-title-text">测试拍平</text>
          <text class="uni-info">设置值: {{data.fontWeight}}</text>
          <text class="uni-info">获取值: {{data.fontWeightActualFlat}}</text>
          <view class="test-box">
            <text ref="textRefFlat" class="common-size test-text-flatten" :style="{ fontWeight: data.fontWeight }" flatten>当前 font-weight: {{data.fontWeight}}</text>
          </view>
        </view>
      </view>

      <view class="uni-common-mt uni-common-mb">
          <text class="uni-tips">第一个枚举值，'' (空字符串) - 空值情况</text>
          <enum-data :items="fontWeightEnum" title="font-weight 枚举值" @change="radioChangeFontWeight" :compact="true"></enum-data>
          <input-data :defaultValue="data.fontWeight" title="font-weight 自定义值" type="text" @confirm="inputChangeFontWeight"></input-data>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup lang="uts">
	import { ItemType } from '@/components/enum-data/enum-data-types'

	const fontWeightEnum: ItemType[] = [
		{ value: 0, name: '' },
		{ value: 1, name: 'normal' },
		{ value: 2, name: 'bold' },
		{ value: 3, name: '400' },
		{ value: 4, name: '500' },
		{ value: 5, name: '600' },
		{ value: 6, name: '700' }
	]

	const data = reactive({
		fontWeight: 'normal',
		fontWeightActual: '',
		fontWeightActualFlat: ''
	})
	const textRef = ref(null as UniTextElement | null)
	const textRefFlat = ref(null as UniTextElement | null)

	const getPropertyValues = () => {
		data.fontWeightActual = textRef.value?.style.getPropertyValue('font-weight') ?? ''
		data.fontWeightActualFlat = textRefFlat.value?.style.getPropertyValue('font-weight') ?? ''
	}

	const changeFontWeight = (value: string) => {
		data.fontWeight = value
		textRef.value?.style.setProperty('font-weight', value)
		textRefFlat.value?.style.setProperty('font-weight', value)
		// 使用 nextTick 确保样式已应用后再获取值
		nextTick(() => {
			getPropertyValues()
		})
	}

	const radioChangeFontWeight = (index: number) => {
		const selectedItem = fontWeightEnum.find((item): boolean => item.value === index)
		if (selectedItem != null) {
			changeFontWeight(selectedItem.name)
		}
	}

	const inputChangeFontWeight = (value: string) => {
		changeFontWeight(value)
	}

	onReady(() => {
		getPropertyValues()
	})

	defineExpose({
		radioChangeFontWeight,
		data
	})
</script>

<style>
	.common-size {
	  font-size: 20px;
	}
	.common{
	  height: 150px;
	  background-color: gray;
	  justify-content: center;
	  align-items: center;
    flex:1;
	}
  .demo-box {
    flex-direction: row;
    margin-top: 10px;
    justify-content: space-around;
  }
	.common-box{
		flex-direction: row;
		justify-content: space-around;
	}

	.test-box {
		width: 180px;
		height: 80px;
		background-color: gray;
		justify-content: center;
		align-items: center;
	}
</style>

# App平台差异

  • app平台 font-weight 样式不支持继承
  • app-android平台不支持任意值粗细，仅支持 normal 和 bold 两种值，大于等于 500 时按 bold （加粗）显示，小于 500 时按 normal（正常）显示
  • app-android平台，部分自定义字体不支持设置 font-weight

# 参见

本页导读
font-weight
uni-app x 兼容性
拍平兼容性
语法
值限制
font-weight 的属性值
默认值
适用组件
示例
App平台差异
参见