一、设置字体样式的基本语法
CSS中设置字体样式的基本语法如下:
font: font-style font-variant font-weight font-size/line-height font-family;
其中,font-size
, font-family
是必填项,其他项都可以不填。
font-style
: 设置字体风格,有常规、斜体、倾斜等样式可选,常规为 normal
,斜体为 italic
,倾斜为 oblique
。
font-variant
: 设置字体变体,有普通和小型大写字母两种样式可选,普通为 normal
,小型大写字母为 small-caps
。
font-weight
: 设置字体粗细,有常规、粗体等样式可选,常规为 normal
或400
,粗体为 bold
或700
。在常规和粗体之间还有其他的取值,如100
表示 thin
,900
表示 black
等。
font-size/line-height
: 设置字体大小和行高,字体大小可以是固定大小的数值或相对于父元素的大小,行高可以是数值、百分比或relative关键字。
font-family
: 设置字体族,可以设置多个字体族,用逗号分开,如果某个字体族不存在,则往后继续寻找下一个字体族,直到找到可用字体族为止。
例如,可以通过下面的代码设置一个斜体、粗体、20px大小、Times New Roman字体的文本样式:
font: italic bold 20px/1.5 'Times New Roman', serif;
二、设置字体大小和行高
在CSS中,可以通过font-size
属性来设置字体大小,字体大小可以是固定大小的数值或相对于父元素的大小。
例如,设置文本大小为14像素:
font-size: 14px;
设置文本大小为父元素大小的50%:
font-size: 50%;
除了font-size
属性,还可以使用line-height
属性来设置行高,行高可以是数值、百分比或relative关键字。
例如,设置文本行高为1.5:
line-height: 1.5;
三、设置字体粗细和风格
在CSS中,可以通过font-weight
属性设置字体粗细,取值为常规、粗体、thin、medium等。
例如,设置文本为粗体:
font-weight: bold;
除了font-weight
属性,还可以使用font-style
属性来设置字体风格,可选值有常规、斜体、倾斜等。
例如,设置文本为斜体:
font-style: italic;
四、设置字体族
在CSS中,可以通过font-family
属性设置字体族,如果某个字体族不存在,则往后继续寻找下一个字体族,直到找到可用字体族为止。
例如,设置文本字体为Arial:
font-family: Arial, sans-serif;
上面代码中,“sans-serif”是通用字体族,如果浏览器中没有Arial字体,则会自动选择系统中能用的通用字体族。
五、其他字体样式设置
在CSS中,还可以通过font-variant
属性设置小型大写字母等字体变体,或通过text-transform
属性将文本变换为大写、小写或首字母大写等。
例如,将文本转换为小型大写字母:
font-variant: small-caps;
将文本转换为大写:
text-transform: uppercase;
完整的样式代码:
h1 { font: italic bold 30px/1.5 'Times New Roman', serif; } body { font-size: 14px; font-family: Arial, sans-serif; }
本文链接:https://my.lmcjl.com/post/20354.html
4 评论