字体属性——精选推荐
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
字体属性
字体属性：字体属性的功能是设置页⾯字体的显⽰样式（设置字体系列:font-family、设置字体尺⼨:font-size、设置字体粗细:font-weight、设置字体样式：font-style、设置字体的⼤⼩写：font-variant、font属性通⽤设定）
1. 设置使⽤的字体：
font-family:更改⽂本的字体系列
字体系列:（链接：）
通⽤字体系列：拥有相似外观的字体系统组合(（如 "Serif" 或 "Monospace"）)
特定字体系列：⼀个特定的字体系列(（如 "Times" 或 "Courier"）)（⾸字母⼤写）
/* 如果字体系列的名称超过⼀个字，它必须⽤引号，如font-family："宋体" */
/* 多个字体系列是⽤⼀个逗号分隔指明 */
/* 特定字体系列 : ⾸字母⼤写 */
p{font-family:"Times New Roman", Times, serif;}
2. 指定字体尺⼨：font-size
能否管理⽂字的⼤⼩，在⽹页设计中是⾮常重要的。
但是，不能通过调整字体⼤⼩使段落看上去像标题，或者使标题看上去像段落。
需要使⽤正确的HTML标签，就<h1> - <h6>表⽰标题和<p>表⽰段落。
默认⼤⼩和普通⽂本段落⼀样，是16像素（16px=1em）。
绝对⼤⼩：
设置⼀个指定⼤⼩的⽂本
不允许⽤户在所有浏览器中改变⽂本⼤⼩
pt: point 1pt = 1/72英⼨
pc: picas 1pc = 1/6英⼨ = 12pt
mm :毫⽶
cm : 厘⽶
in：英⼨
相对⼤⼩：
相对于周围的元素来设置⼤⼩
允许⽤户在浏览器中改变⽂字⼤⼩
em :与当前字体尺⼨相等（1em和当前字体⼤⼩相等。
在浏览器中默认的⽂字⼤⼩是16px。
）(如果使⽤ em 单位，则可以在所有浏览器中调整⽂本⼤⼩。
)
ex : 1ex = 0.5em
px : 像素 1px = 1/16em 16px = 1em
% ：百分⽐（相对⽗元素的字体尺⼨）(在所有浏览器的解决⽅案中，设置 <body>元素的默认字体⼤⼩的是百分⽐)
3. 字体粗细：font-weight
4. 字体样式：font-style 设置字体的样式，是否斜体。
（可以继承）
italic 和 oblique 的区别：
italic样式设计为字体弯曲，oblique普通字体倾斜
5. 指定字体变量： font-variant
small-caps：
所有的⼩写字母均会被转换为⼤写，但是所有使⽤⼩型⼤写字体的字母与其余⽂本相⽐，其字体尺⼨更⼩。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体变量</title>
<style>
p.normal {font-variant:normal;}
/*⼩型的⼤写字母*/
p.small {font-variant:small-caps;}
</style>
</head>
<body>
<p class="normal">My name is judy.</p>
<p class="small">My name is judy.</p>
</body>
</html>
6. 字体快捷属性：font
可设置的属性值（按顺序）：font-style font-weight font-variant font-size/line-height font-family
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font属性</title>
<style>
p.ex1
{
/* 设置：font-size:15px; 和 font-family: arial,sans-serif;*/
/* font-size和font-family的值是必需的 */
font:15px arial,sans-serif;
}
p.ex2
{
/*设置：font-style(是否倾斜); font-weight:bold(粗体);font-size|line-height:12px/30px（字体尺⼨|⾏⾼）;font-family:Georgia,serif;（字体系列）*/ /* 浏览器只能显⽰⽤户计算机中安装的字体 */
font:italic bold 12px/30px Georgia,serif;
}
</style>
</head>
<body>
<p class="ex1">This is a paragraph. </p>
<p class="ex2">This is a paragraph.</p>
</body>
</html>。