css中字体的设置

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
/*font-family:文本字体名称
font-style:文本样式
font-variant:文本是否为小型大写字母大小写
font-weight:设置文本的粗细
font-stretch:文本是否横向的拉伸变形
font-size:文本字号大小写
src:自定义字体的相对路径或绝对路径,此属性只能在@font-face中使用*/
p[lang="a"]{
font-family: "arial narrow";
font-weight: bold;
font-size: 100px;
}
/*@font-face {
font-family:myfont;
src: url();
}
p[lang="b"]{
font-family: myfont;
font-weight: bold;
font-size: 100px;
}*/
</style>
<body>
<p lang="a">@font-face</p>
<p lang="b">@font-face</p>
</body>
</html>
CSS中的字体设置主要包括以下几个方面: 1. **`font-family`**:这是最基本的字体属性,用于指定元素应该显示的字体系列。你可以提供一系列的字体名,从用户浏览器支持的第一种开始,直到最后一种。 ```css font-family: 'Arial', sans-serif; ``` 2. **`font-size`**:控制文本的大小,可以使用像素值、em、rem、百分比或一些相对单位。 ```css font-size: 16px; ``` 3. **`font-weight`**:改变文字的粗细,有normal(常规)、bold(粗体)、bolder(更粗)和lighter(更轻)等。 ```css font-weight: bold; ``` 4. **`font-style`**:设置斜体样式,包括normal(正常)、italic(斜体)和oblique(倾斜)。 ```css font-style: italic; ``` 5. **`line-height`**:行高,决定了文本间的垂直距离。 ```css line-height: 1.5; ``` 6. **`letter-spacing`**:调整字符间距。 ```css letter-spacing: 2px; ``` 7. **`text-transform`**:改变文本的大小写形式,如uppercase(大写)、lowercase(小写)或capitalize(首字母大写)。 ```css text-transform: uppercase; ``` 8. **`font-variant`**:对某些特殊字体的变体处理,比如small-caps(小写大写字母)。 ```css font-variant: small-caps; ``` 9. **`font-feature-settings`**:控制OpenType特性的应用,例如装饰线和连字。 ```css font-feature-settings: "liga" on; ``` 每个属性都可以单独使用,也可以组合在一起为元素创建个性化的字体样式。同时,现代CSS还允许动态加载Web字体(@font-face)以增强可用字体选择。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值