微信小程序开发——字体样式设置

font-style文字样式

• normal 正常字体
• italic 斜体字
• oblique 倾斜字体

font-weight文字粗细

• 取值范围 100-900
• normal 相当于400
• bold 粗体 相当于700
• bolder
• lighter

font-size文字尺寸大小
font-variant文字是否为小型的大写字母

• normal 正常的字体
• small-caps 小型的大写字母

font-family字体名称
font-stretch文本是否横向拉伸变形

• normal 正常文字宽度
• ultra-condensed 比正常文字宽度窄4个基数
• extra-condensed 比正常文字宽度窄3个基数
• condensed 比正常文字宽度窄2个基数
• semi-condensed 比正常文字宽度窄1个基数
• semi-expanded 比正常文字宽1个基数
• expanded 比正常文字宽度宽2个基数
• extra-expanded 比正常文字宽3个基数
• ultra-expanded 比正常文字宽度宽4个基数

color字体颜色

• 16进制值，#92a8d1
• RGB，rgb(255,1,23)
• RGBA，rgba(244,12,12,0.7)
• hsl，hsl(120,100%,25%)
• hsla，hsla(120,100%,25%,0.7)

text-align文本的对齐方式

• left 把文本排列到左边。默认值：由浏览器决定。
• right 把文本排列到右边。
• center 把文本排列到中间。
• justify 实现两端对齐文本效果。
• inherit 规定应该从父元素继承 text-align 属性的值。

vertical-align垂直对齐

• baseline 默认。元素放置在父元素的基线上。
• sub 垂直对齐文本的下标。
• super 垂直对齐文本的上标
• top 把元素的顶端与行中最高元素的顶端对齐
• text-top 把元素的顶端与父元素字体的顶端对齐
• middle 把此元素放置在父元素的中部。
• bottom 使元素及其后代元素的底部与整行的底部对齐。
• text-bottom 把元素的底端与父元素字体的底端对齐。
• length 将元素升高或降低指定的高度，可以是负数。
• % 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
• inherit 规定应该从父元素继承 vertical-align 属性的值。

text-indent首行缩进

• length 定义固定的缩进。默认值：0。
• % 定义基于父元素宽度的百分比的缩进。
• inherit 规定应该从父元素继承 text-indent 属性的值。

letter-sapcing字母之间的距离

• normal 默认。规定字符间没有额外的空间。
• length 定义字符间的固定空间（允许使用负值）。
• inherit 规定应该从父元素继承 letter-spacing 属性的值。

word-spacing单词间距，以空格来区分单词

• normal 默认
• inherit 继承父元素
• length 固定值

white-space文档中的空白处

• normal 默认。空白会被浏览器忽略。
• pre 空白会被浏览器保留。其行为方式类似 HTML 中的

   标签。

• nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
  标签为止。
• pre-wrap 保留空白符序列，但是正常地进行换行。
• pre-line 合并空白符序列，但是保留换行符。
• inherit 规定应该从父元素继承 white-space 属性的值。

text-overflow文本溢出包含它的元素时显示方式（需要配合white-space: nowrap、overflow: hidden使用）

• clip 剪切文本。
• ellipsis 显示省略符号 … 来代表被修剪的文本。
• string 使用给定的字符串来代表被修剪的文本。
• initial 设置为属性默认值。阅读关于 initial
• inherit 从父元素继承该属性值。 阅读关于 inherit

overflow内容溢出一个元素的框

• visible 默认值。内容不会被修剪，会呈现在元素框之外。
• hidden 内容会被修剪，并且其余内容是不可见的。
• scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
• auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
• inherit 规定应该从父元素继承 overflow 属性的值。

text-decoration文本修饰样式（以下三种属性的简写：text-decoration-line、text-decoration-color、text-decoration-style）

• none 默认。定义标准的文本。
• underline 定义文本下的一条线。
• overline 定义文本上的一条线。
• line-through 定义穿过文本下的一条线。
• blink 定义闪烁的文本。
• inherit 规定应该从父元素继承 text-decoration 属性的值。

text-shadow文本阴影

• h-shadow 必需。水平阴影的位置。允许负值。
• v-shadow 必需。垂直阴影的位置。允许负值。
• blur 可选。模糊的距离。
• color 可选。阴影的颜色。参阅 CSS 颜色值。

line-height行高

• normal 默认。设置合理的行间距。
• number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
• length 设置固定的行间距。
• % 基于当前字体尺寸的百分比行间距。
• inherit 规定应该从父元素继承 line-height 属性的值。

direction文本方向

• ltr 默认。文本方向从左到右。
• rtl 文本方向从右到左。
• inherit 规定应该从父元素继承 direction 属性的值。