CSS3学习笔记-字体和文字

字体

字体族font-family

通常需要给处字体栈以适应不同机器间的适配,多单词字体需要用引号

body{
  font-family:"trebuchet ms", tahoma, sans-serif;  
}

serif和sans-serif是最保险的方法

字体大小

设置font-size:62.5% 1em=10px

em单位的相对大小会逐层复合

rem 相对于根元素的字体大小,不支持ie8极其以下的浏览器

字体样式

font-style:italic normal oblique

html中可以直接使用<em>标签做到italic斜体的效果,斜体在英文中表示强调

字体粗细

font-weight 主要bold 和normal html中可以使用<strong>标签

字体变化

font-variant: small-caps 和normal small-caps用来将字母转换为小型大写字母

简写

注意:必须声明font-size和font-family。且声明时其他属性不分先后,font-size倒二,font-family最后声明

在设置字体大小时,可以顺便设置行高,如12px/1.5

word-wrap

normal | break-word 将内容在边界内换行

word-break

normal | break-all(中断单词) | keep-all(保留单词)

white-space

normal(无视空白符)| pre(保留空白符) | nowrap (文本不会换行,直到碰到<br/>标签)| pre-line (合并空白符)| pre-wrap (保留空白符,正常换行)

文本属性

文本缩进text-indent 

注:子元素文本会继承父元素的文本缩进。文本元素只作用于文本内容,不作用于包裹文本元素的盒子

在设定缩进和外边距时要使用em,以便用户改变字体大小时,它们能等比变化

字符间距letter-spacing

正值增大,负值缩小,缩小标题的字符间距能够让网页显得更专业

单词间距word-spacing

文本装饰text-decoration

line-height行高,修改默认行高的快捷属性就是在font中应用:

div#intro {font:1.2em/1.4 helvetica, arial, sans-serif;}

文本转换text-transform

normal uppercase lowercase capitalize(首字母大写)

text-overflow

clip | ellipsis文本溢出显示省略标记

text-overflow要在一定的高度范围内配合overflow:hidden才能生效

.text{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

垂直对齐vertical-align

sub super top middle bottom 

以基线为参照上下移动文本,只影响行内元素。注:如果想影响块级元素,需使用Inline或Inline-block。

常用于文字上标及下标,脚注等,html标签有上标<sup>和下标<sub>,重新设置font-size和vertical-align会达到更好的效果

Web字体@font-face

(1)@font-face 中的font-family仅用于元素中font-family的引用

(2)应用多个字体就启用多个@font-face规则

(3)src属性会依次获取字体的来源

(4)可以使用字体图标

 在::before和::after的content的元素中引用html实体,需要将十六进制的改写为\201C这样的形式

html5 的<blockquote>用于表示被引用的文本,<quote>用于将文本的开头和末尾加上双引号

posted @ 2018-09-16 14:34  CodingSherlock  阅读(287)  评论(0编辑  收藏  举报