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

2023-05-16

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 属性的值。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序开发——字体样式设置 的相关文章

随机推荐