跟着艾文一起学前端-第7篇-CSS-字体样式

CSS中的字体样式属性

属性名称 属性值 描述
font-size 像素值单位px,一定记得带上单位px 像素
font-family 字体的名称,可以是中文、英文或者Unicode编码值 设置字体
font-weight normal、bold、bolder、lighter、100~900(取100的倍数切注意是没有单位的) 用于定义字体的粗细,通常使用数字值。400等价于normal,700等价于bold
font-style normal(标准的字体样式,是默认值,用的比较多,可以让斜体实现不倾斜)、italic(斜体) 字体风格

常用字体的中英文名称和Unicode编码(浏览器兼容更好)如下表所示

字体中文名称 英文名称 Unicode编码
宋体 SimSun \5B8B\4F53
新宋体 NSimSun \65B0\5B8B\4F53
黑体 SimHei \9ED1\4F53
微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312
隶书 LiSu \96B6\4E66

字体使用时的一些常识:
字体:

  • 各个字体之间必须用英文逗号隔开
  • 中文字体要加英文引号,英文字体不需要加引号,但是英文字体名称中含有空格、#、$等特殊符号时,名称必须要加双引号,为了便于记忆,全加双引号就对了。
  • 需要设置英文字体时,英文字体名称必须位于中文字体名称前面
  • 尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示
  • 多个字体时的展示顺序在于遍历这些字体直到支持的字体为止,如果都不支持的话就会使用默认字体进行展示

字体大小:

  • 基本要14px及以上
  • 值为偶数

思考:
如果说给一个字体设置字体、加粗、风格的话,我们要写成如下的样式咱们已标签选择器为例:

span {
font-size: 14px;
font-weight: 700;
font-style: normal;
}

我们要给字体设置什么样的样式的话就要把它的属性写一遍,然后为了方便看,我们要写很多行,这样对于代码的阅读是有利的,但是对于开发效率来说,是有一定的影响的,所以,基于此问题,就有了如下的内容:综合设置字体的样式

font 属性- 用于综合设置字体样式

语法格式如下:

选择器 {font: font-style font-weight font-size/line-height font-family;}

注意:使用font属性时,字体属性必须要按照上面的语法格式对应的属性顺序来写,不能变更字体属性的书写顺序,且各个属性以空格隔开。其中font-size和 font-family属性必须要有,否则font属性将不会起作用,其他的属性值则可以省略。
最简单的写法如下:

p {
	font: 14px "宋体";  /* 这里css的注释方式  ,这里省略了font-style 和font-weight 属性,只写了font-size和font-family属性的值 */
}

CSS文字的外观属性

  • color 控制字体的颜色,一般用十六进制的值,如 color: #FF0000 ;
  • line-height 行高,单位px,一般情况下行高比字号大小大个8px就可以了 ;
  • text-align 文字的水平对齐方式值有left/right/center 左对齐/右对齐/居中 共三种取值情况,对齐方式是让内容居中对齐,不是让容器居中对齐;
  • text-indent 首行缩进,单位em , 1em就是一个字的宽度,比如是汉字的话,就是一个汉字的宽度
  • text-decoration 文本装饰,取值为:none(无装饰,可用于取消删除线)、underline(下划线)、overline(上划线)、line-through(贯穿线及删除线)、blink(闪烁)
发布了37 篇原创文章 · 获赞 15 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/u012764358/article/details/105096131