# font-weight

font-weight CSS 属性指定了字体的粗细程度。一些字体只提供 normal 和 bold 两种值。

# uni-app x 兼容性

Web Android iOS
4.0 3.9 4.11

# 浏览器兼容性

Chrome Edge Firefox Opera Safari IE
√( 2 ) √( 12 ) √( 1 ) √( 3.5 ) √( 1 ) √( 3 )

# 语法

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

# font-weight 的属性值

名称 兼容性 描述
normal
正常粗细。与 400 等值。
bold
加粗。与 700 等值。
400
正常粗细,与 normal 等值。
700
加粗,与 bold 等值。

# 默认值

normal

# 适用组件

# 示例

hello uni-app x

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

Template

Script

<template>
	<view style="flex-grow: 1;">
		<view style="height: 250px;background-color: gray;justify-content: center;align-items: center;">
			<text class="common" style="font-weight: normal;">font-weight: normal</text>
			<text class="common" style="font-weight: bold;">font-weight: bold</text>
			<text class="common" style="font-weight: 400;">font-weight: 400</text>
			<text class="common" style="font-weight: 700;">font-weight: 700</text>
		</view>
	</view>
</template>



<style>
	.common {
		font-size: 20px;
	}
</style>

# App平台差异

  • font-weight 样式不支持继承
  • App-Android平台,部分自定义字体不支持设置font-weight。

# 参见