字体类 相关属性的设置

梦想的初衷 提交于 2020-03-01 02:03:48

字体类 (font)

font 设置或检索对象中的文本特性。该属性是复合属性。

  • font:[ [ <’ font-style ‘> || <’ font-variant ‘> || <’ font-weight ‘> ]? <’ font-size ‘> [ / <’ line-height ‘> ]? <’ font-family ‘> ]

font-style : 指定文本字体样式

  • normal:指定文本字体样式为正常的字体 
    • italic: 指定文本字体样式为斜体。对于没有设计斜体的特殊字体,如果要使用斜体外观将应用oblique
    • oblique: 指定文本字体样式为倾斜的字体。人为的使文字倾斜,而不是去选取字体中的斜体字

font-variant:指定文本是否为小型的大写字母

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

font-weight:指定文本字体的粗细

  • normal: 正常的字体。相当于数字值400
  • bold: 粗体。相当于数字值700。
  • bolder: 定义比继承值更重的值
  • lighter: 定义比继承值更轻的值
  • integer: 用数字表示文本字体粗细。取值范围:100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

font-size: 指定文本字体尺寸

line-height: 指定文本字体的行高,即字体最底端与字体内部顶端之间的距离

  • normal: 允许内容顶开或溢出指定的容器边界。
  • length: 用长度值指定行高。不允许负值。
  • percentage: 用百分比指定行高,其百分比取值是基于字体的高度尺寸。不允许负值。
  • number: 用乘积因子指定行高。不允许负值。

font-family : 指定文本使用某个字体或字体序列

  • family-name = arial | georgia | verdana | helvetica | simsun and etc(字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格或中文,则应使用引号括起)
  • generic-family = cursive | fantasy | monospace | serif | sans-serif(字体序列名称)
  • body { font-family: helvetica, verdana, sans-serif; }

14. 文本类(text)

text-transform 检索或设置对象中的文本的大小写

  • none: 无转换
  • capitalize: 将每个单词的第一个字母转换成大写
  • uppercase: 将每个单词转换成大写
  • lowercase: 将每个单词转换成小写

white-space设置或检索对象内空格的处理方式

  • normal: 默认处理方式。
  • pre: 用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字超出边界时不换行。可查阅pre对象
  • nowrap: 强制在同一行内显示所有文本,合并文本间的多余空白,直到文本结束或者遭遇br对象。
  • pre-wrap: 用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字碰到边界时发生换行。
  • pre-line: 保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行。

word-break 设置或检索对象内文本的字内换行行为

  • normal: 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行。
  • keep-all: 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本。
  • break-all: 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本,比如使连续的英文字母间断行。 
    对于解决防止页面中出现连续无意义的长字符打破布局,应该使用break-all属性值;

word-wrap 设置或检索当内容超过指定容器的边界时是否断行

  • normal: 允许内容顶开或溢出指定的容器边界。
  • break-word: 内容将在边界内换行。如果需要,单词内部允许断行。

overflow-wrap 设置或检索当内容超过指定容器的边界时是否断行

  • normal: 允许内容顶开或溢出指定的容器边界。
  • break-word: 内容将在边界内换行。如果需要,单词内部允许断行。 
    CSS3中将 <' word-wrap '> 改名为 <' overflow-wrap '>

text-align 设置或检索对象中内容的水平对齐方式

  • left: 内容左对齐。
  • center: 内容居中对齐。
  • right: 内容右对齐

word-spacing 检索或设置对象中的单词之间的最小,最大和最佳间隙

  • normal: 默认间隔
  • length: 用长度值指定间隔。可以为负值。
  • percentage: 用百分比指定间隔。可以为负值。(CSS3)

letter-spacing 检索或设置对象中的字符之间的最小,最大和最佳间隙

  • normal: 默认间隔
  • <length>: 用长度值指定间隔。可以为负值。
  • <percentage>: 用百分比指定间隔。可以为负值。(CSS3)

text-indent 检索或设置对象中的文本的缩进

  • <length>: 用长度值指定文本的缩进。可以为负值。
  • <percentage>: 用百分比指定文本的缩进。可以为负值。

vertical-align 设置或检索内联元素在行框内的垂直对其方式

  • baseline: 将支持valign特性的对象的内容与基线对齐
  • sub: 垂直对齐文本的下标
  • super: 垂直对齐文本的上标
  • top: 将支持valign特性的对象的内容与对象顶端对齐
  • text-top: 将支持valign特性的对象的文本与对象顶端对齐
  • middle: 将支持valign特性的对象的内容与对象中部对齐
  • bottom: 将支持valign特性的对象的文本与对象底端对齐
  • text-bottom: 将支持valign特性的对象的文本与对象顶端对齐
  • percentage: 用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。
  • length: 用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。(CSS2)

line-height 检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离

  • normal: 允许内容顶开或溢出指定的容器边界。
  • <length>: 用长度值指定行高。不允许负值。
  • <percentage>: 用百分比指定行高,其百分比取值是基于字体的高度尺寸。不允许负值。
  • <number>: 用乘积因子指定行高。不允许负值。

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!