css字体属性定义文本的字体系列 大小 加粗 风格 和 变形(如小型大写字母(类似于大写字母字体变小了))
css字体系列
在css中 有两种不同类型的字体系列名称
1.通用字体系列 - 拥有相似外观的字体系统组合(比如 "Serif" 或 "Monospace")
2.特定字体系列 - 具体的字体系列(比如 "Times" 或 "Courier")
指定字体系列
font-family 属性定义字体系列
body {font-family: sans-serif;}
字体风格
属性 font-style规定了字体的属性
该属性有三个值
normal 文本正常显示
italic 文本斜体显示
oblique 文本倾斜显示
italic 和 oblique 的区别
font-style 非常简单:用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。
斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。
通常情况下,italic 和 oblique 文本在 web 浏览器中看上去完全一样。
字体变形
font-variant属性可以设定小写字母大写
字体加粗
font-weight设置文本的粗细
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而 700 等价于 bold。
如果将元素的加粗设置为 bolder,浏览器会设置比所继承值更粗的一个字体加粗。与此相反,关键词 lighter 会导致浏览器将加粗度下移而不是上移。
字体大小
font-size属性可以控制字体的大小
css字体实例:
<head> <meta charset="UTF-8"> <title>字体</title> <style type="text/css"> p.font { /*设置字体样式*/ font-family: "bodoni mt condensed"; /*设置字体粗细程度*/ font-weight: 400; /*设置字体大小*/ font-size: 30px; /*设置字体显示风格*/ font-style: italic; } p.variant { font-variant: small-caps; } </style> </head> <body> <p>这一段是正常的显示</p> <p class="font">这是一段文本 哈哈哈哈哈哈</p> <p class="variant">tianlianfeng</p> </body>