一、字体:font-family
CSS属性font-family允许您通过给定一个有先后顺序的,由字体名或者字体族名组成的列表来为选定的元素设置字体
属性的值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体,或者是通过 @font-face
指定的可以直接下载的字体。
1、语法:
font-family: Georgia, serif;
初始值 depends on user agent
是否是继承属性 yes
2、什么时候需要引号?
有字符符号(标点符号)和数字字符 或者 中文。
3、通用的字体族名:
通用字体族名是一种备选机制,用于在指定的字体不可用时给出较好的字体。通用字体族名都是关键字,所以不可以加引号。 在列表的末尾应该至少有一个通用字体族名。
serif
:带衬线字体,笔画结尾有特殊的装饰线或衬线。
例如: Lucida Bright, Lucida Fax, Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif.
sans-serif
:无衬线字体,即笔画结尾是平滑的字体。
例如, "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif.
monospace
:等宽字体,即字体中每个字宽度相同。
例如, "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace.
cursive
:草书字体。这种字体有的有连笔,有的还有特殊的斜体效果。因为一般这种字体都有一点连笔效果,所以会给人一种手写的感觉。
例如, "Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive.
fantasy
:Fantasy字体主要是那些具有特殊艺术效果的字体。
例如. Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.
二、文字大小:font-size
font-size CSS 属性指定字体的大小。它的值可以是一个绝对单位,也可以是一个相对单位。
语法:
font-size: 12p
初始值 medium (16px)
是否是继承属性 yes
继承的是父元素计算过后的值!!!
相对单位:
px : 与屏幕的特性有关
em:参照于元素本身的font-size
rem:参照于根标签的font-size
百分比:参照父元素字体大小
三、文字颜色:color
color属性用来定义元素内文字的颜色(前景色)。它的值可以是颜色名,也可以是一个16进制的数,也可以是一个rgb/rgba
值
语法:
color: red;
初始值 depends on user agent
是否是继承属性 yes
单位:
颜色值:关键字
rgb:取值范围0~255 rgb(255,0,0)
rgba:a代表透明 取值范围0~1
16进制数:以#开头
四、文字粗细:font-weight
font-weight CSS 属性指定了字体的粗细程度。
一些字体只提供 normal
和 bold
两种值。
语法:
font-weight: normal;
初始值 normal
是否是继承属性 yes
五、文字样式:font-style
决定文字是否产生倾斜。提供normal, italic; oblique;
语法:
font- style: normal;
初始值 normal
是否是继承属性 yes
六、简写属性:font
font 属性是设置 font-style, font-weight, font-size, line-height 和 font-family
属性的简写。
语法:
font: italic 2em "Open Sans", sans-serif;
初始值
font-style: normal
font-weight: normal
font-size: medium
line-height: normal
font-family: depends on user agent
是否是继承属性 yes
注意:
该属性必须同时设置 font-size 和 font-family 属性值。
属性值的顺序并非完全自由:如需设置 font-style和 font-weight,它们必须要放在 font-size 值的前面。 line-height 值必须紧跟在 font-size 之后,并且要在属性值前面加上 / 。最后, font-family 是必不可少的,且必须放在最后。
建议写法:
font-size/ line-height font-family
代码示例:
<head>
<meta charset="UTF-8">
<title>CSS字体样式</title>
<style>
/*
* font-family 设置字体
* 什么时候需要引号?有字符符号(标点符号)和数字字符 或者 中文
* 通用的字体族名:
serif:带衬线字体,笔画结尾有特殊的装饰线或衬线。
sans-serif:无衬线字体,即笔画结尾是平滑的字体。
monospace:等宽字体,即字体中每个字宽度相同。
cursive:草书字体。
fantasy:Fantasy字体主要是那些具有特殊艺术效果的字体。
注意: 使用时通常加上字体族名,防止系统没有改字体造成异常显示。
*/
#pfont {
font-family: "微软雅黑", fantasy;
}
/*
* 自定义字体
*/
@font-face {
font-family:"cusfont";
src: url("./font/BAUHS93.TTF");
}
#cufont {
font-family: cusfont, fantasy;
}
/*
* font-size 设置字体大小
* 相对单位:
px : 与屏幕的特性有关
em:参照于元素本身的font-size
rem:参照于根标签的font-size
百分比:参照父元素字体大小
*/
#sizefont {
font-size: 2em;
}
/*
* color 设置字体颜色
* 单位:
颜色值:关键字
rgb:取值范围0~255 rgb(255,0,0)
rgba:a代表透明 取值范围0~1
16进制数:以#开头
*/
#cfont {
color: blue;
}
/*
* font-weight 设置字体粗细
* (数值是否起作用与字体有关,不建议使用数值)
*/
#wfont {
font-weight: bold;
}
/*
* font-style 设置字体文字样式
* 决定文字是否产生倾斜。提供normal, italic; oblique;
*/
#styplefont {
font-style: oblique;
}
/*
* 简写属性 font 简写属性有顺序,按照顺序来,否则不显示 size在family前面
使用规则:简写属性写重要属性(size family),其他在后面覆盖
*/
#fontjx {
font: 0.8em arial;
color: pink;
}
</style>
</head>
<body>
<div id="pfont">
2018年6月13日,早晨7点多钟,在山东省日照市,某房产商一座新开的楼盘开盘,现场涌入了1000多人。当天气温达32度,但依然难挡购房者的热情。经过近3个小时的电脑摇号,186套房子被一抢而空。房产商只给了每一位选房者3分钟的选房时间。一位购房者表示,买房子比买白菜时间还短,就像是在行军打仗。为了做到公开公平公正,房产商采取了电脑摇号的方式。有购房者说,这样估计能保证做到公平,万一自己摇到号,就好比中了彩票大奖。
<p style="font-family: 'agency fb';">2018年6月13日,早晨7点多钟,在山东省日照市,某房产商一座新开的楼盘开盘,现场涌入了1000多人。当天气温达32度,但依然难挡购房者的热情。经过近3个小时的电脑摇号,186套房子被一抢而空。房产商只给了每一位选房者3分钟的选房时间。一位购房者表示,买房子比买白菜时间还短,就像是在行军打仗。为了做到公开公平公正,房产商采取了电脑摇号的方式。有购房者说,这样估计能保证做到公平,万一自己摇到号,就好比中了彩票大奖。</p>
</div>
<div id="cufont">
cufont:2018年6月13日,早晨7点多钟,在山东省日照市,某房产商一座新开的楼盘开盘,现场涌入了1000多人。当天气温达32度,但依然难挡购房者的热情。经过近3个小时的电脑摇号,186套房子被一抢而空。房产商只给了每一位选房者3分钟的选房时间。一位购房者表示,买房子比买白菜时间还短,就像是在行军打仗。为了做到公开公平公正,房产商采取了电脑摇号的方式。有购房者说,这样估计能保证做到公平,万一自己摇到号,就好比中了彩票大奖。
<p style="font-family: 'agency fb';">2018年6月13日,早晨7点多钟,在山东省日照市,某房产商一座新开的楼盘开盘,现场涌入了1000多人。当天气温达32度,但依然难挡购房者的热情。经过近3个小时的电脑摇号,186套房子被一抢而空。房产商只给了每一位选房者3分钟的选房时间。一位购房者表示,买房子比买白菜时间还短,就像是在行军打仗。为了做到公开公平公正,房产商采取了电脑摇号的方式。有购房者说,这样估计能保证做到公平,万一自己摇到号,就好比中了彩票大奖。</p>
</div>
<div id="sizefont">
2018年6月13日,早晨7点多钟,在山东省日照市,某房产商一座新开的楼盘开盘,现场涌入了1000多人。当天气温达32度,但依然难挡购房者的热情。经过近3个小时的电脑摇号,186套房子被一抢而空。房产商只给了每一位选房者3分钟的选房时间。一位购房者表示,买房子比买白菜时间还短,就像是在行军打仗。为了做到公开公平公正,房产商采取了电脑摇号的方式。有购房者说,这样估计能保证做到公平,万一自己摇到号,就好比中了彩票大奖。
</div>
<div id="cfont">
2018年6月13日,早晨7点多钟,在山东省日照市,某房产商一座新开的楼盘开盘,现场涌入了1000多人。当天气温达32度,但依然难挡购房者的热情。经过近3个小时的电脑摇号,186套房子被一抢而空。房产商只给了每一位选房者3分钟的选房时间。一位购房者表示,买房子比买白菜时间还短,就像是在行军打仗。为了做到公开公平公正,房产商采取了电脑摇号的方式。有购房者说,这样估计能保证做到公平,万一自己摇到号,就好比中了彩票大奖。
</div>
<div id="wfont">
2018年6月13日,早晨7点多钟,在山东省日照市,某房产商一座新开的楼盘开盘,现场涌入了1000多人。当天气温达32度,但依然难挡购房者的热情。经过近3个小时的电脑摇号,186套房子被一抢而空。房产商只给了每一位选房者3分钟的选房时间。一位购房者表示,买房子比买白菜时间还短,就像是在行军打仗。为了做到公开公平公正,房产商采取了电脑摇号的方式。有购房者说,这样估计能保证做到公平,万一自己摇到号,就好比中了彩票大奖。
</div>
<div id="styplefont">
2018年6月13日,早晨7点多钟,在山东省日照市,某房产商一座新开的楼盘开盘,现场涌入了1000多人。当天气温达32度,但依然难挡购房者的热情。经过近3个小时的电脑摇号,186套房子被一抢而空。房产商只给了每一位选房者3分钟的选房时间。一位购房者表示,买房子比买白菜时间还短,就像是在行军打仗。为了做到公开公平公正,房产商采取了电脑摇号的方式。有购房者说,这样估计能保证做到公平,万一自己摇到号,就好比中了彩票大奖。
</div>
<div id="fontjx">
2018年6月13日,早晨7点多钟,在山东省日照市,某房产商一座新开的楼盘开盘,现场涌入了1000多人。当天气温达32度,但依然难挡购房者的热情。经过近3个小时的电脑摇号,186套房子被一抢而空。房产商只给了每一位选房者3分钟的选房时间。一位购房者表示,买房子比买白菜时间还短,就像是在行军打仗。为了做到公开公平公正,房产商采取了电脑摇号的方式。有购房者说,这样估计能保证做到公平,万一自己摇到号,就好比中了彩票大奖。
</div>
</body>