CSS字体样式属性

一、font-size:字号大小
该属性可以使用相对长度单位（推荐），也可以使用绝对长度单位，推荐使用像素单位px。

相对长度单位说明
em 相对于当前对象内文本的字体尺寸
px 像素（推荐）
绝对长度单位说明
in 英寸
cm 厘米
mm 毫米
pt 点

Tip：谷歌浏览器默认的字号大小是16 px。

[样例代码]
<style>
   p{
       font-size: 16px;
   }

</style>

二、font-family:字体
该属性用于设置字体，网页中常用的字体有宋体（比较适合印刷）、微软雅黑、黑体等。

[样例代码]
<style>
   *{
       /*font-family: "微软雅黑";*/
       font-family: "Microsoft yahei",Arial;
   }
</style>

小贴士：

1、现在网页中普遍使用14px+；
2、尽量使用偶数的数字字号，否则老的浏览器用奇数容易出现bug；
3、各种字体之间必须使用英文状态下的逗号隔开；
4、中文字体需要加英文状态下的引号，英文字体一般不需要加引号，当需要设置英文字体时，英文字体名必须位于中文字体名之前。
5、如果字体名中包含了空格、*、#、$、\等符号，则该字体必须加英文状态下的单引号或者双引号；
6、尽量使用习题默认字体，保证在任何用户的浏览器中都可以正常显示；
7、如果有多个字体，系统会逐个按照优先级去查找，如果一个都找不到（书写问题/浏览器兼容性），则使用浏览器默认字体；

CSS Unicode编码
在CSS直接使用Unicode编码来写字体名称可以避免一些浏览器不识别的问题，使其可以正确解析。

中文名	英文名	unicode
宋体	SimSun	\5B8B\4F53
黑体	SimHei	\9ED1\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
楷体	KaiTi	\6977\4F53
微软正黑体	Microsoft JhengHei	\5FAE\x8F6F\6B63\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1

三、font-weight:字体粗细
字体加粗除了使用b和strong标签外，还可以使用CSS来实现，但是CSS是没有语义的。
normal：正常字体（不加粗），相当于400
bold：粗体，相当于700
bolder：特粗体
lighter：细体
number：100/200/300...900 （建议用数字，解析起来更快）

[样例代码]

四、font-style:字体风格
字体倾斜除了用i和em标签之外，还可以使用CSS来实现，但是CSS是没有语义的。
normal：正常字体（让斜体变正常）
italic：斜体

[样例代码]

【温故知新】CSS学习笔记（字体样式属性）相关推荐

CSS基础(part7)--字体样式属性
学习笔记,仅供参考,有错必纠参考自:CSS中文文档文章目录 CSS CSS的长度单位字体样式属性 font-size font-family font-weight font-style fon ...
【温故知新】CSS学习笔记（样式表）
CSS-网页的美容师 CSS-Cascading Style Sheets 美化样式通常叫做层叠样式表(级联样式表). CSS样式引入的方式有三种(书写位置): 1.内部样式表 <head&g ...
CSS学习笔记---字体文本
字体字体的样式 font-size(用来设置文字所占框的大小) 设置文字的大小,浏览器中一般默认的文字大小都是16px font-size设置的并不是文字本身的大小, 在页面中,每个文字都是处在一个 ...
CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
【温故知新】CSS学习笔记（字体样式属性）附加篇
CSS字体样式属性目录 CSS字体样式属性一.font属性二.color属性三.line-height 行间距(行高) 四.text-align 水平对齐方式五.text-indent 首行 ...
常见的CSS字体样式属性/font-size/font-family/font-weight/font-style/font综合属性/@font-face属性/学习笔记
一.常见的CSS字体样式属性 1.font-size属性:用于设置字体字号该属性的值有相对长度单位:em(相对当前对象内文本字体尺寸)px(像素,最常用) 绝对长度单位:in(英寸)cm(厘米)m ...
CSS基础——CSS字体样式属性【学习笔记】
CSS字体样式属性调试工具 font字体 CSS外观属性快捷操作emmet语法练习案例-体育页面 1.font字体 1.1 font-size:大小作用: font-size属性用于设置字号 p ...
CSS学习笔记2字体属性和文本属性
CSS字体属性 CSS Fonts(字体)属性用于定义字体系列.大小.粗细和文字样式字体系列 CSS使用font-family属性定义文本的字体系列 p { font-family:"微软 ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...

【温故知新】CSS学习笔记（字体样式属性）

CSS字体样式属性

【温故知新】CSS学习笔记（字体样式属性）相关推荐

最新文章

热门文章