font-size

展示全部

# font-size

font-size CSS 属性设置字体大小。更改字体大小还会更新字体大小相关的 <length> 单位，例如 line-height 属性的 em 单位值。

# uni-app x 兼容性

Web	Android	iOS
4.0	3.9	4.11

# 浏览器兼容性

Chrome	Edge	Firefox	Opera	Safari	IE
√（ 1 ）	√（ 12 ）	√（ 1 ）	√（ 7 ）	√（ 1 ）	√（ 5.5 ）

# 语法

font-size: <absolute-size> | <relative-size> | <length-percentage>;

# font-size 的属性值

名称

兼容性

描述

large

基于用户默认字体大小（medium）的绝对大小关键字。

larger

相对大小关键字。字体大小将相对于父元素的字体大小变大或变小，大致按照上面用于区分绝对大小关键字的比率。

medium

基于用户默认字体大小（medium）的绝对大小关键字。

small

基于用户默认字体大小（medium）的绝对大小关键字。

smaller

相对大小关键字。字体大小将相对于父元素的字体大小变大或变小，大致按照上面用于区分绝对大小关键字的比率。

x-large

基于用户默认字体大小（medium）的绝对大小关键字。

x-small

基于用户默认字体大小（medium）的绝对大小关键字。

xx-large

基于用户默认字体大小（medium）的绝对大小关键字。

xx-small

基于用户默认字体大小（medium）的绝对大小关键字。

xxx-large

基于用户默认字体大小（medium）的绝对大小关键字。

math

使用特殊的数学缩放规则来确定 font-size 属性的计算值。

# 默认值

平台	默认值
uvue	16px

注意：W3C 默认值为：medium

# 适用组件

# 示例

hello uni-app x

Template

Script

<template>
  <view style="flex-grow: 1;">
    <view style="height: 250px;background-color: gray;justify-content: center;align-items: center;">
      <text ref="text" :style="{'font-size': fontSize}">font-size: {{fontSize}}</text>
      <text style="font-size: 30px;">font-size: 30px</text>
    </view>
  </view>
</template>



<style>

</style>