font-family的取值有哪些
时间: 2023-06-06 15:09:01 浏览: 39
font-family的取值有很多种,例如 serif(衬线字体)、sans-serif(无衬线字体)、monospace(等宽字体)、cursive(手写体)、fantasy(装饰字体)等等。不同的浏览器可能会支持不同的字体。
相关问题
html font-family 数字与特殊字符同行不同大的字体
可以使用CSS中的font-variant属性来实现数字与特殊字符同行不同大的字体。具体实现方法如下:
1. 设置字体样式,包括字体大小、字体类型、字体粗细等属性。
2. 使用font-variant属性设置数字和特殊字符的大小和位置。常见的取值包括:
- normal:默认值,数字和特殊字符与字母大小相同,位于基线上方。
- small-caps:数字和特殊字符比字母小,但大小不同,位于基线上方。
- oldstyle-nums:数字采用老式风格,高低不齐,位于基线上方。
- lining-nums:数字采用等高风格,与字母大小相同,位于基线上方。
- tabular-nums:数字等宽,与字母大小相同,位于基线上方。
下面是一个示例代码:
```html
<style>
p {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
font-variant: small-caps lining-nums;
}
</style>
<p>1234-5678-9012</p>
```
在这个示例中,字体样式设置为Arial,字体大小为16px,字体粗细为粗体。font-variant属性设置为small-caps和lining-nums,表示数字和特殊字符比字母小,但大小不同,数字采用等高风格,与字母大小相同。
效果如下:
![font-variant示例](https://i.loli.net/2021/05/27/3DqzLw2k1QJ6UvG.png)
可以看到,数字和特殊字符比字母小,但大小不同,数字采用等高风格,与字母大小相同,位于基线上方。这样就实现了数字与特殊字符同行不同大的字体效果。
css 字体设置font
要设置字体,可以使用 CSS 中的 font 属性。font 属性可以同时设置字体大小、字体样式、字体粗细、字体系列和行高等属性。
下面是一个 font 属性的示例:
```css
/* 设置字体为 16 像素大小,宋体,粗体 */
body {
font: bold 16px "SimSun";
}
```
font 属性的各个值的含义如下:
- font-style:字体样式,可取值为 normal、italic、oblique,默认值为 normal。
- font-weight:字体粗细,可取值为 normal、bold、bolder、lighter 或者 100 到 900 的数字,默认值为 normal。
- font-size:字体大小,可取值为像素、em、rem 等单位,默认值为 medium。
- font-family:字体系列,多个字体之间用逗号分隔。
- line-height:行高,可取值为像素、em、rem 等单位,默认值为 normal。
需要注意的是,如果某个值没有设置,则默认值为 normal。例如:
```css
/* 设置字体为 16 像素大小,宋体 */
body {
font: 16px "SimSun";
}
```
这里没有设置字体样式和字体粗细,因此默认值为 normal。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pptx](https://img-home.csdnimg.cn/images/20210720083543.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)