字体样式

最新推荐文章于 2024-04-06 20:41:17 发布

The_last_knight

最新推荐文章于 2024-04-06 20:41:17 发布

阅读量1.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Web开发文章标签： css

本文链接：https://blog.youkuaiyun.com/The_last_knight/article/details/86544989

Web开发专栏收录该内容

54 篇文章

订阅专栏

本文介绍了CSS中的字体样式，包括字体大小、字体选择、字体粗细和字体风格。讲解了如何设置字体大小，如使用px单位，并建议使用偶数大小；讨论了如何指定字体，如使用逗号分隔的字体列表，以及中文字体的正确表示方式；还阐述了字体粗细的设置，包括常规数值和百分比值；最后提到了字体风格的设定，包括normal和italic。同时，文章还展示了如何通过综合连写简化CSS字体样式的声明。

字体样式

字体

font-family属性是用来设置字体的，比如

font-family: "楷体";

英文字体可以不加引号，但是如果英文字体含有空格，则需要加上引号，比如

font-family: "Times New Roman";

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

在CSS中设置字体名称，直接写中文是可以的。但是在文件编码(GB2312、UTF-8等)不匹配时会产生乱码的错误。xp系统不支持类似微软雅黑的中文。解决办法是可以使用CSS Unicode字体表示，比如font-family: "\5FAE\8F6F\96C5\9ED1"就表示设置字体为微软雅黑。其中\5FAE\8F6F\96C5\9ED1就是Unicode字体。常见中文对应的Unicode字体如下:

字体名称	英文名称	`Unicode` 编码
宋体	`SimSun`	`\5B8B\4F53`
新宋体	`NSimSun`	`\65B0\5B8B\4F53`
黑体	`SimHei`	`\9ED1\4F53`
微软雅黑	`Microsoft YaHei`	`\5FAE\8F6F\96C5\9ED1`
楷体`_GB2312`	`KaiTi_GB2312`	`\6977\4F53_GB2312`
隶书	`LiSu`	`\96B6\4E66`
幼园	`YouYuan`	`\5E7C\5706`
华文细黑	`STXihei`	`\534E\6587\7EC6\9ED1`
细明体	`MingLiU`	`\7EC6\660E\4F53`
新细明体	`PMingLiU`	`\65B0\7EC6\660E\4F53`

字体粗细

font-weight属性是用来设置字体粗细的，可选属性值有normal,bold,bolder,lighter,除了有着四种值可选外，其值还可以是数字，范围为100-900并且必须为100的倍数。normal相当于是400,bold相当于是700,一般建议用数字。

font-weight: 400;

字体风格

font-style属性是用来设置字体风格的，有两种值可选，分别是normal对于正常的字体风格，另一个是italic对应的是斜体风格。

font-style: italic;

综合连写

假如我们设置字体的时候，四个都要设置，假如我要设置字体大小为20px,字体为微软雅黑，字体粗细为500,字体风格为斜体，我们会这样写:

.font {
    font-size: 20px;
    font-family: "\5FAE\8F6F\96C5\9ED1";
    font-weight: 500;
    font-style: italic;
}

因为对于字体样式写的比较频繁，这么写的话过于的繁琐，所以CSS规定可以对其综合连写，如下

.font {
    font: italic 500 20px "\5FAE\8F6F\96C5\9ED1";
}

其中书写顺序必须为font-style,font-weight,font-size,font-family,其中font-size和font-family不可以省略。