tmui-cli 2.0.3 → 2.0.5

package/data/uniappx/css/flex.md

@@ -0,0 +1,216 @@
+## flex
+
+flex 属性设置弹性元素如何增大或缩小以适应其弹性容器中可用的空间，是 flex-grow、flex-shrink、flex-basis 的简写。
+
+### uni-app x 兼容性 
+| Web | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- |
+| 4.0 | 3.9 | 4.11 | 4.61 |
+
+### App平台拍平（flatten）兼容性  @flatten_compatibility
+
+| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |
+| :- | :- | :- |
+| 5.21 | 5.11 | 5.0 |
+
+### 语法
+```
+flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
+```
+
+### 值限制
+- number
+- length
+- enum
+
+### flex 的属性值
+| 名称 | 兼容性 | 描述 |
+| :- | :- | :- |
+| initial | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。相当于将属性设置为"flex: 0 1 auto"。 |
+| auto | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 "flex: 1 1 auto". |
+| none | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"。 |
+
+### 默认值 @default-value 
+ | 平台 | 默认值 |
+| :- | :- |
+| uvue | none |
+
+ **注意**：W3C 默认值为：initial
+
+### 示例 
+ 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/display/flex.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/display/flex.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/display/flex
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/display/flex
+
+>示例
+```vue
+<template>
+  
+  <scroll-view style="flex: 1">
+  
+    <view>
+      <view class="head">
+        <text class="tip">下面有一个灰色区域，display默认值为flex</text>
+        <text class="tip">当前display值：{{data.display}}</text>
+      </view>
+      <view class="content" :style="{display:data.display}">
+        <text class="cyan-text" style="background-color: aquamarine;">展示display区域</text>
+        <scroll-view>
+          <text class="common-text" style="height: 20px;">scroll-view</text>
+        </scroll-view>
+        
+          <text class="common-text" style="height: 20px;">下方有个native-view</text>
+          <test-native-view style="width: 20px;height: 20px;background-color: cyan;"></test-native-view>
+        
+      </view>
+      <button @tap="switchDisplay" class="uni-common-mb">切换display属性</button>
+
+      <text class="uni-title-text uni-common-mt">scroll-view 组件</text>
+      <text class="uni-subtitle-text">display: flex 和 display: none</text>
+      <view class="demo-box">
+        <scroll-view class="common-view" style="display: flex;">
+          <text class="common-text">display: flex</text>
+        </scroll-view>
+        <scroll-view class="common-view" style="display: none;">
+          <text class="common-text">display: none</text>
+        </scroll-view>
+      </view>
+
+      <view class="uni-common-mt">
+        <text class="uni-title-text">setProperty 设置与 getPropertyValue 获取</text>
+      </view>
+
+      <view class="test-container">
+        
+        <view class="test-item">
+          <text class="uni-subtitle-text">view 组件</text>
+          <text class="uni-info">设置值: {{data.displayProp}}</text>
+          <text class="uni-info">获取值: {{data.displayActual}}</text>
+          <view class="test-box">
+            <view ref="viewRef" class="common-view test-view" :style="{ display: data.displayProp }">
+              <text class="common-text">view</text>
+            </view>
+          </view>
+        </view>
+
+        
+        <view class="test-item">
+          <text class="uni-subtitle-text">text 组件</text>
+          <text class="uni-info">设置值: {{data.displayProp}}</text>
+          <text class="uni-info">获取值: {{data.displayActualText}}</text>
+          <view class="test-box">
+            <text ref="textRef" class="common-text test-text" :style="{ display: data.displayProp }">text</text>
+          </view>
+        </view>
+
+        
+        <view class="test-item">
+          <text class="uni-subtitle-text">image 组件</text>
+          <text class="uni-info">设置值: {{data.displayProp}}</text>
+          <text class="uni-info">获取值: {{data.displayActualImage}}</text>
+          <view class="test-box">
+            <image ref="imageRef" class="common-image test-image" :style="{ display: data.displayProp }" src="/static/test-image/logo.png"></image>
+          </view>
+        </view>
+      </view>
+
+      
+      <view class="uni-common-mt uni-common-mb">
+        <text class="uni-tips">第一个枚举值，'' (空字符串) - 空值情况</text>
+        <enum-data :items="displayEnum" title="display 枚举值" @change="radioChangeDisplay" :compact="true"></enum-data>
+        <input-data :defaultValue="data.displayProp" title="display 自定义值" type="text" @confirm="inputChangeDisplay"></input-data>
+      </view>
+
+      
+        <view class="uni-common-mb">
+          <text>native-view组件: display: flex 和 display: none</text>
+          <view class="demo-box">
+            <test-native-view class="common-view" style="display: flex;width:100px;"></test-native-view>
+            <test-native-view class="common-view" style="display: none;width:100px;"></test-native-view>
+          </view>
+        </view>
+      
+    </view>
+  
+  </scroll-view>
+  
+</template>
+
+<style>
+  .page {
+    height: 100%;
+  }
+
+  .head {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    align-items: center;
+  }
+
+  .tip {
+    color: red;
+  }
+
+  .content {
+    border: 5px dotted blue;
+    margin: 10px auto;
+    padding: 30px;
+    width: 200px;
+    height: 150px;
+    background-color: gray;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* 多组件横向布局样式 */
+  .test-container {
+    flex-direction: row;
+    margin-top: 10px;
+  }
+
+  .test-item {
+    flex: 1;
+    margin: 0 5px;
+  }
+
+  .test-box {
+    width: 100%;
+    height: 60px;
+    background-color: gray;
+  }
+
+  .common-view {
+    height: 50px;
+    background-color: green;
+  }
+
+  .common-text {
+    height: 50px;
+    background-color: green;
+    font-size: 12px;
+    color: white;
+  }
+
+  .cyan-text {
+    color: #1a1a1a;
+  }
+
+  .common-image {
+    width: 50px;
+    height: 50px;
+    background-color: green;
+  }
+
+  .demo-box {
+    flex-direction: row;
+    justify-content: space-around;
+    margin-top: 10px;
+  }
+</style>
+
+```
+
+### 参见
+- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/flex)
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.flex)

package/data/uniappx/css/font-family.md

@@ -0,0 +1,187 @@
+## font-family
+
+font-family 属性用于设置元素使用的字体，允许通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为元素设置字体。
+
+### uni-app x 兼容性 
+| Web | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- |
+| 4.0 | 3.9 | 4.11 | 4.61 |
+
+### App平台拍平（flatten）兼容性  @flatten_compatibility
+
+| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |
+| :- | :- | :- |
+| 5.21 | 5.11 | 5.0 |
+
+### 语法
+```
+font-family: <family-name>;
+```
+
+### 值限制
+- font
+
+### font-family 的属性值
+| 名称 | 兼容性 | 描述 |
+| :- | :- | :- |
+| cursive | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 草书字体。这种字体有的有连笔，有的还有特殊的斜体效果。因为一般这种字体都有一点连笔效果，所以会给人一种手写的感觉。<br/>        例如：Brush Script MT、Brush Script Std、Lucida Calligraphy、Lucida Handwriting、Apple Chancery、cursive。 |
+| fantasy | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | Fantasy 字体主要是那些具有特殊艺术效果的字体。<br/>        例如：Papyrus、Herculanum、Party LET、Curlz MT、Harrington、fantasy。 |
+| monospace | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 等宽字体，即字体中每个字宽度相同。<br/>        例如：Fira Mono、DejaVu Sans Mono、Menlo、Consolas、Liberation Mono、Monaco、Lucida Console、monospace。 |
+| sans-serif | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 无衬线字体，即笔画结尾是平滑的字体。<br/>        例如：Open Sans、Fira Sans、Lucida Sans、Lucida Sans Unicode、Trebuchet MS、Liberation Sans、Nimbus Sans L、sans-serif。 |
+| serif | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 带衬线字体，笔画结尾有特殊的装饰线或衬线。<br/>        例如：Lucida Bright、Lucida Fax、Palatino、Palatino Linotype、Palladio、URW Palladio、serif。 |
+| uni-icon | Web x / Android 4.33 / iOS 4.33 / HarmonyOS 4.61（部分支持，见上） | uni-app x 内置字体图标 uni-icon |
+
+### 适用组件 @unix-tags 
+ - text
+- button
+- input
+- textarea
+
+### 示例 
+ 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/text/font-family.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/text/font-family.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/text/font-family
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/text/font-family
+
+>示例
+```vue
+<template>
+  
+  <scroll-view style="flex: 1">
+  
+    <view class="uni-padding-wrap">
+      <text class="common" style="font-family: monospace">font-family: monospace</text>
+
+      <text class="common" style="font-family: cursive">font-family: cursive</text>
+
+      <text class="common" style="font-family: AlimamaDaoLiTiTTF">font-family: 阿里妈妈刀隶体-ttf（网络字体下载后生效）</text>
+
+      <text class="common" style="font-family: AlimamaDaoLiTiOTF">font-family: 阿里妈妈刀隶体-otf</text>
+
+      <text class="common" style="font-family: AlimamaDaoLiTiOTF;font-weight: bold;font-style: italic;">font-family: 阿里妈妈刀隶体-otf（粗斜体）</text>
+
+      <text style="font-family: UniFontFamily;">style 加载非 static 目录字体文件：{{uniIcon}}</text>
+
+      
+
+      <text class="uni-title-text title-color">【拍平测试】</text>
+      <text class="common" style="font-family: monospace" flatten>font-family: monospace</text>
+      <text class="common" style="font-family: cursive" flatten>font-family: cursive</text>
+      <text class="common" style="font-family: AlimamaDaoLiTiTTF" flatten>font-family: 阿里妈妈刀隶体-ttf（网络字体下载后生效）</text>
+      <text class="common" style="font-family: AlimamaDaoLiTiOTF" flatten>font-family: 阿里妈妈刀隶体-otf</text>
+      <text class="common" style="font-family: AlimamaDaoLiTiOTF;font-weight: bold;font-style: italic;" flatten>font-family: 阿里妈妈刀隶体-otf（粗斜体）</text>
+      <text style="font-family: UniFontFamily;" flatten>style 加载非 static 目录字体文件：{{uniIcon}}</text>
+
+      <view class="uni-common-mt">
+        <text class="uni-title-text title-color">setProperty 设置与 getPropertyValue 获取</text>
+
+        
+        <text class="uni-info">设置值: {{data.fontFamily}}</text>
+        <text class="uni-info">获取值: {{data.fontFamilyActual}}</text>
+        <text ref="textRef" class="common" :style="{ fontFamily: data.fontFamily }">当前 font-family: {{data.fontFamily}}</text>
+
+        
+        <text class="uni-info">设置值: {{data.fontFamily}}</text>
+        <text class="uni-info">获取值: {{data.fontFamilyActualFlat}}</text>
+        <text ref="textRefFlat" class="common" :style="{ fontFamily: data.fontFamily }" flatten>当前 font-family: {{data.fontFamily}}</text>
+
+        <view class="uni-common-mt uni-common-mb">
+          <text class="uni-tips">第一个枚举值，'' (空字符串) - 空值情况</text>
+          <enum-data :items="fontFamilyEnum" title="font-family 枚举值" @change="radioChangeFontFamily" :compact="true"></enum-data>
+          <input-data :defaultValue="data.fontFamily" title="font-family 自定义值" type="text" @confirm="inputChangeFontFamily"></input-data>
+        </view>
+      </view>
+    </view>
+    
+    <view style="margin: 24px 12px;">
+      <button type="default" @click="openUniIcon">内置字体图标uni-icon示例</button>
+    </view>
+    
+  
+  </scroll-view>
+  
+</template>
+
+<style>
+  .common {
+    font-size: 20px;
+    line-height: 40px;
+  }
+  .title-color{
+    color:#007aff;
+    margin-bottom: 10px;
+  }
+
+  @font-face {
+    font-family: AlimamaDaoLiTiTTF;
+    src: url('https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/font/AlimamaDaoLiTi.ttf');
+  }
+
+  @font-face {
+    font-family: AlimamaDaoLiTiOTF;
+    src: url('/static/font/AlimamaDaoLiTi.otf');
+  }
+
+  @font-face {
+    font-family: UniFontFamily;
+    src: url('./uni.ttf');
+  }
+
+  /*  @font-face {
+    font-family: AlimamaDaoLiTiWOFF;
+    src: url('/static/app-ios/AlimamaDaoLiTi.woff');
+  }
+  @font-face {
+    font-family: AlimamaDaoLiTiWOFF2;
+    src: url('/static/app-ios/AlimamaDaoLiTi.woff2');
+  } */
+
+  .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>
+
+```
+
+### 字体设置
+
+对于系统中已经存在的字体，font-family里直接写字体名称即可。\
+但对于系统中不存在的字体，需要通过src属性的url方法来指定字体路径。如下：
+```css
+@font-face {
+    font-family: UniFontFamily;
+    src: url('/static/uni.ttf');
+  }
+```
+
+**关于自定义字体的格式**
+- app-android: 支持ttf和otf字体。不支持woff和woff2和可变字体
+- app-ios: 支持ttf、otf、woff、woff2，需要注意，css 中的 font-family 值可以随意取，这个名字不是字体真正的名字。字体真正的名字（font-family），也就是注册到系统中的名字是保存在字体二进制文件中的。你需要确保你使用的字体的真正名字（font-family）足够特殊，否则在向系统注册时可能发生冲突，导致注册失败，你的字符被显示为‘?’。如果你使用 [http://www.iconfont.cn/](http://www.iconfont.cn/) 来构建你的 iconfont。确保在项目设置中，设置一个特殊的 font-family 名字。默认是 “iconfont”，极大可能发生冲突。
+- web: 支持的字体取决于浏览器，详见mdn或caniuse
+- app平台: 指定自定义字体路径时，必须使用url()包裹，支持本地文件路径、远程地址，4.33 版本开始支持 base64 格式数据；
+- HarmonyOS平台: 支持ttf、otf 使用 [@ohos.font](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/js-apis-font-V13?ha_source=Dcloud&ha_sourceId=89000448) 实现
+
+自定义字体的加载
+1. 在css中加载：[@font-face](./common/at-rules.md)
+2. 使用API加载： [uni.loadFontface](../api/load-font-face.md)
+
+### App平台差异
+- app平台 font-family 样式不支持继承，每层组件都需要设样式
+- app平台 font-family 属性值不支持使用分隔符（,）多个字体名称设置字体回退列表，仅支持设置一个字体
+- app平台由于不支持伪元素，字体图标加载需使用unicode直显。[详见](./common/at-rules.md)
+
+### 参见
+- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/font-family)
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.text.font-family)
+
+[示例代码](https://gitcode.com/dcloud/hello-uni-app-x/blob/master/pages/CSS/text/font-family.uvue)

package/data/uniappx/css/font-size.md

@@ -0,0 +1,176 @@
+## font-size
+
+font-size 属性用于设置字体大小，更改字体大小还会更新字体大小相关的 `<length>` 单位，例如 line-height 属性的 em 单位值。
+
+### uni-app x 兼容性 
+| Web | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- |
+| 4.0 | 3.9 | 4.11 | 4.61 |
+
+### App平台拍平（flatten）兼容性  @flatten_compatibility
+
+| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |
+| :- | :- | :- |
+| 5.21 | 5.11 | 5.0 |
+
+### 语法
+```
+font-size: <absolute-size> | <relative-size> | <length-percentage>;
+```
+
+### 值限制
+- length
+
+### font-size 的属性值
+| 名称 | 兼容性 | 描述 |
+| :- | :- | :- |
+| large | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 基于用户默认字体大小（medium）的绝对大小关键字。 |
+| larger | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 相对大小关键字。字体大小将相对于父元素的字体大小变大或变小，大致按照上面用于区分绝对大小关键字的比率。 |
+| medium | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 基于用户默认字体大小（medium）的绝对大小关键字。 |
+| small | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 基于用户默认字体大小（medium）的绝对大小关键字。 |
+| smaller | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 相对大小关键字。字体大小将相对于父元素的字体大小变大或变小，大致按照上面用于区分绝对大小关键字的比率。 |
+| x-large | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 基于用户默认字体大小（medium）的绝对大小关键字。 |
+| x-small | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 基于用户默认字体大小（medium）的绝对大小关键字。 |
+| xx-large | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 基于用户默认字体大小（medium）的绝对大小关键字。 |
+| xx-small | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 基于用户默认字体大小（medium）的绝对大小关键字。 |
+| xxx-large | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 基于用户默认字体大小（medium）的绝对大小关键字。 |
+| math | Web 4.0 / Android 系统版本 - / Android - / iOS 系统版本 - / iOS - / HarmonyOS 系统版本 - / HarmonyOS -（部分支持，见上） | 使用特殊的数学缩放规则来确定 font-size 属性的计算值。 |
+
+### 默认值 @default-value 
+ | 平台 | 默认值 |
+| :- | :- |
+| uvue | 16px |
+
+ **注意**：W3C 默认值为：medium
+
+### 适用组件 @unix-tags 
+ - text
+- button
+- input
+- textarea
+
+### 示例 
+ 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/text/font-size.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/text/font-size.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/text/font-size
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/text/font-size
+
+>示例
+```vue
+<template>
+  
+  <scroll-view style="flex: 1">
+  
+    <view style="flex-grow: 1;">
+      <text class="uni-tips">说明：左边是正常版本，右边是拍平版本</text>
+      <view class="demo-box">
+        <view class="common">
+          <text ref="text" :style="{'font-size': data.fontSize}">font-size: {{data.fontSize}}</text>
+          <text style="font-size: 30px;">font-size: 30px</text>
+          <text style="font-size: 20rpx;">font-size: 20rpx</text>
+        </view>
+        <view class="common">
+          <text ref="text" :style="{'font-size': data.fontSize}" flatten>font-size: {{data.fontSize}}</text>
+          <text style="font-size: 30px;" flatten>font-size: 30px</text>
+          <text style="font-size: 20rpx;" flatten>font-size: 20rpx</text>
+        </view>
+      </view>
+
+      <view class="uni-common-mt">
+        <text class="uni-title-text">setProperty 设置与 getPropertyValue 获取</text>
+      </view>
+
+      <view class="common-box">
+        
+        <view class="uni-common-mt">
+          <text class="uni-title-text">font-size</text>
+          <text class="uni-info">设置值: {{data.fontSizeProp}}</text>
+          <text class="uni-info">获取值: {{data.fontSizeActual}}</text>
+          <view class="test-box">
+            <text ref="textRef" :style="{ fontSize: data.fontSizeProp }">当前 font-size: {{data.fontSizeProp}}</text>
+          </view>
+        </view>
+
+        
+        <view class="uni-common-mt">
+          <text class="uni-title-text">测试拍平</text>
+          <text class="uni-info">设置值: {{data.fontSizeProp}}</text>
+          <text class="uni-info">获取值: {{data.fontSizeActualFlat}}</text>
+          <view class="test-box">
+            <text ref="textRefFlat" :style="{ fontSize: data.fontSizeProp }" flatten>当前 font-size: {{data.fontSizeProp}}</text>
+          </view>
+        </view>
+      </view>
+
+      <view class="uni-common-mt uni-common-mb">
+          <text class="uni-tips">第一个枚举值，'' (空字符串) - 空值情况</text>
+          <enum-data :items="fontSizeEnum" title="font-size 枚举值" @change="radioChangeFontSize" :compact="true"></enum-data>
+          <input-data :defaultValue="data.fontSizeProp" title="font-size 自定义值" type="text" @confirm="inputChangeFontSize"></input-data>
+      </view>
+    </view>
+  
+  </scroll-view>
+  
+</template>
+
+<style>
+.common{
+  background-color: gray;
+  justify-content: center;
+  height: 100px;
+  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平台仅支持 px 和 rpx 单位设置字体大小，默认值为16px。
+
+如果仅开发App，那么属性值可以不设置单位，不设置单位时当做 px 处理。但无法兼容web和小程序。
+
+不支持百分比的单位、不支持基于用户默认字体大小的绝对大小关键字，如small、medium、large等、不支持em、rem、ex等单位。
+
+虽然支持但不推荐使用rpx。
+
+正常情况下，普通字体不需要、也不应该设置font-size。使用默认的16px即可。
+
+更并不需要显式的设置`font-size:16px`，这种多余的代码浪费性能。
+
+需要变大或变小的字体，基于16px的默认值，适当增加或缩小字号即可。
+
+如果在font-size中使用rpx，类似于web开发中给字体大小设百分比，没有意义。rpx在font-size中使用有如下问题：
+1. 根据屏幕宽度动态计算，在超宽屏上脱离预期的大
+2. rpx性能不如px，排版引擎需要根据屏幕宽度给页面里每个text设置样式，如果text组件很多，就会加重计算耗时。尤其是一些开发者给所有text组件都设rpx，性能会很差。大部分字体应该不仅没有rpx，甚至连px也不设，就使用默认的字号即可。
+3. rpx会计算出小数，小数又需要取整，在不同情况下就会产生精度误差。这个在贴边场景下会比较明显，有的屏幕下2个元素看起来是挨着的，有的屏幕下2个元素中间有条缝。
+
+详见[rpx适用范围](./common/length.md#rpx)
+
+- 继承说明
+App平台不支持样式继承，font-size 也不例外。font-size仅对作用的当前[text](../component/text.md)组件生效。
+
+#### Web规范
+属性值必须设置单位，无单位时当做非法值处理。非法值会回退为默认值，即16px。
+
+### 参见
+- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/font-size)
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.text.font-size)