一、设置字体样式的基本语法
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://www.506064.com/n/279414.html
微信扫一扫 
支付宝扫一扫 