css 字体属性详细总结

标签：css   html   css字体属性   

1，font-size属性设置字体的大小

声明：

有能力管理文本的大小在 web 设计领域很重要。但是，您不应当通过调整文本大小使段落看上去像标题，或者使标题看上去像段落。

请始终使用正确的 HTML 标题，比如使用 <h1> - <h6> 来标记标题，使用 <p> 来标记段落。

使用像素来设置字体大小 （px）

通过像素设置文本大小，可以对文本大小进行完全控制：

h1 {font-size:60px;}

使用百分比设置字体大小 （%）

父元素的百分比

body{
font-size: 40px;
}
h1,h2{
font-size: 100%; 表示和父元素body元素定义的字体一样大
}
h1{
font-size:50%;   表示相对于父元素来说,h1属性字体是父元素的1/2;(20px)
}
h2{
font-size: 200%; 表示相对于父元素来说,h2属性字体是父元素的2倍;(80px)
}

smaller比父元素更小

body{
font-size: 40px;
}
h1,h2{
font-size: smaller; 表示比父元素body元素定义的字体更小，
}

larger:比父元素更大：

body{
font-size: 40px;
}
h1,h2{
font-size: larger; 表示比父元素body元素定义的字体更大，
}

inherit:继承父元素的

body{
font-size: 40px;
}
h1,h2{
font-size: larger; 表示继承父元素body元素定义的字体大小，
}

 
2，font-family定义字体类型

可以使用逗号（，）隔开，以确保字体不存在的时候直接使用下一个字体

p {

font-family: ‘微软雅黑‘,‘宋体’Times, TimesNR, ‘New Century Schoolbook‘,

Georgia, ‘New York‘, serif;

}

3，font-weight字体加粗

使用 bold 关键字可以将文本设置为粗体。

关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。

如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。

normal（默认值），bold(粗), bolder(更粗) ，lighter(更细)

 
p.normal {
font-weight:normal;
}
p.thick {
font-weight:bold;
}
p.thicker {
font-weight:900
}

4,font-style字体风格

normal ：正常标准

italic ：斜体

oblique ：倾斜

inherit ：继承

p.normal {
font-style:normal;
}
p.italic {
font-style:italic;
}
p.oblique {
font-style:oblique;
}

italic 和 oblique 的区别

font-style 非常简单：用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。

通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。

5，font-variant 小型大写字母显示文本

font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

p.small
  {
  font-variant:small-caps;
  }

本文出自 “crazy_sir” 博客，请务必保留此出处http://douya.blog.51cto.com/6173221/1840855

css 字体属性详细总结

标签：css   html   css字体属性   

原文地址：http://douya.blog.51cto.com/6173221/1840855