“这是我参与8月更文挑战的第16天,活动详情查看: 8月更文挑战”
font属性
font 简写属性在一个声明中设置所有字体属性。
可设置的属性是(按顺序): "font-style font-variant font-weight font-size/line-height font-family"
font-size和font-family的值是必需的。如果缺少了其他值,默认值将被插入,如果有默认值的话。(默认值是 not specified)
注意: line - height属性设置行与行之间的空间。
下面我们来看看它的属性。
font-family属性
font - family属性指定一个元素的字体。
font-family 可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。
有两种类型的字体系列名称:
- family-name - 指定的系列名称:具体字体的名称,比如:"times"、"courier"、"arial"。
- generic-family - 通常字体系列名称:比如:"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace。
注意: 每个值用逗号分开。
注意: 如果字体名称包含空格,它必须加上引号。在HTML中使用"style"属性时,必须使用单引号。
p
{
font-family:"Times New Roman",Georgia,Serif;
}
font-style属性
font-style属性指定文本的字体样式。
属性值
值 描述
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。
p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}
font-size属性
font-size属性设置字体大小。
属性值
值 描述
xx-smallx-smallsmallmediumlargex-largexx-large 把字体的尺寸设置为不同的尺寸,从 xx-small 到 xx-large。默认值:medium。
smaller 把 font-size 设置为比父元素更小的尺寸。
larger 把 font-size 设置为比父元素更大的尺寸。
length 把 font-size 设置为一个固定的值。
% 把 font-size 设置为基于父元素的一个百分比值。
inherit 规定应该从父元素继承字体尺寸。
h1 {font-size:250%}
h2 {font-size:200%}
p {font-size:100%}
font-weight属性
font-weight 属性设置文本的粗细
属性值
值 描述
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100200300400500600700800900 定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。
inherit 规定应该从父元素继承字体的粗细。
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
color属性
Color属性指定文本的颜色。
值 描述
color_name 规定颜色值为颜色名称的颜色(比如 red)。
hex_number 规定颜色值为十六进制值的颜色(比如 #ff0000)。
rgb_number 规定颜色值为 rgb 代码的颜色(比如 rgb(255,0,0))。
inherit 规定应该从父元素继承颜色。
body
{
color:red;
}
h1
{
color:#00ff00;
}
p
{
color:rgb(0,0,255);
}
写在最后
以上就是字体的一些CSS样式,赶快动起来,让你的字体更加漂亮吧!
以上内容,如有不正之处,欢迎掘友们批评指正。